JavaScript使用import和require打包实例分享

来源：微智科技网

之前使用ES6写代码,webpack打包后上线,一点问题没有,也看过打包后的代码,长的很乱,也没敢看看咋回事,加载后就是能运行!本文主要和大家介绍了JavaScript中使用import 和require打包后实现原理分析,需要的朋友可以参考下，希望能帮助到大家。

今天通过个例子理解一下打包前,和打包后的代码!

1.创建文件夹，并在里面创建两个文件夹,app文件夹和public文件夹，app文件夹用来存放原始数据和我们将写的JavaScript模块，public文件夹用来存放之后供浏览器读取的文件（包括使用webpack打包生成的js文件以及一个 index.html 文件）。接下来我们再创建三个文件:

index.html --放在public文件夹中;

Greeter.js -- 放在app文件夹中;

main.js -- 放在app文件夹中;

此时项目结构如下图所示

项目结构

我们在 index.html 文件中写入最基础的html代码，它在这里目的在于引入打包后的js文件（这里我们先把之后打包后的js文件命名为 bundle.js ，之后我们还会详细讲述）。

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>sample Project</title>
 </head>
 <body>
 <p id='root'>
 </p>
 <script src="bundle.js"></script>
 </body>
</html>

我们在 Greeter.js 中定义一个返回包含问候信息的 html 元素的函数,并依据CommonJS规范导出这个函数为一个模块：

main.js 文件中我们写入下述代码，用以把 Greeter模块返回的节点插入页面。

使用webpack打包后:

首先最为层是包裹着立即执行函数(加粗的内容),参数是一个数组,数组中每一项是对应的模块,每个模块包裹在 (function(module, exports, __webpack_require__) {//模块内容 });

立即执行函数运行执行 return __webpack_require__(__webpack_require__.s = 0);

也就是执行传入数组中的第一个模块main.js

将运行后的每个模块挂载到installedModules = {}上,当下个需要这个模块直接返回当前模块,不在运行代码块了!

接下来将require改为import看看打包后的如何实现

我们将 Greeter.js的信息改为如下：

然后我们再次打包:

显示全文

全部频道

JavaScript使用import和require打包实例分享