js的模块化进程

现在前端技术日新月异，对于同一个问题痛点，各个时段有各自的解决方案，这就带来了很大差异。今天我就打算梳理js模块化的历史进程，讲一讲这些方案要做什么，怎么做。

js模块化进程的起因

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。当一个项目开发的越来越复杂的时候，你会遇到一些问题：命名冲突（变量和函数命名可能相同），文件依赖（引入外部的文件数目、顺序问题）等。

JavaScript发展的越来越快，超过了它产生时候的自我定位。这时候js模块化就出现了。

什么是模块化

模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案。他按照功能将一个软件切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。当使用模块化开发的时候可以避免刚刚的问题，并且让开发的效率变高，以及方便后期的维护。

js模块化进程

一、早期：script标签

这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中。

缺点： 
1.污染全局作用域 
2.只能按script标签书写顺序加载 
3.文件依赖关系靠开发者主观解决

二、发展一：CommonJS规范

允许模块通过require方法来同步加载（同步意味阻塞）所要依赖的其他模块，然后通过module.exports来导出需要暴露的接口。

1. // module add.js

2. module.exports = function add (a, b) { return a + b; }

3.  

4. // main.js

5. var {add} = require('./math');

6. console.log('1 + 2 = ' + add(1,2);

CommonJS 是以在浏览器环境之外构建JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。

三、发展二：AMD/CMD

（1）AMD

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出（异步模块定义）。

AMD标准中定义了以下两个API：

1. require([module], callback);
2. define(id, [depends], callback);

require接口用来加载一系列模块，define接口用来定义并暴露一个模块。

1. define(['./a', './b'], function(a, b) {

2. // 依赖必须一开始就写好

3. a.add1()

4. ...

5. b.add2()

6. ...

7. })

优点： 
1、适合在浏览器环境中异步加载模块 2、可以并行加载多个模块

（2）CMD

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。(在CommomJS和AMD基础上提出)

1. define(function (requie, exports, module) {

2. //依赖可以就近书写

3. var a = require('./a');

4. a.add1();

5. ...

6. if (status) {

7. var b = requie('./b');

8. b.add2();

9. }

10. });

优点： 
1、依赖就近，延迟执行 2、可以很容易在服务器中运行

（3）AMD 和 CMD 的区别

AMD和CMD起来很相似，但是还是有一些细微的差别：

1、对于依赖的模块，AMD是提前执行，CMD是延迟执行。

2、AMD推崇依赖前置；CMD推崇依赖就近，只有在用到某个模块的时候再去require。

3、AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一

四、发展三：ES6模块化

EcmaScript6 标准增加了JavaScript语言层面的模块体系定义。

在 ES6 中，我们使用export关键字来导出模块，使用import关键字引用模块。

1. // module math.jsx

2. export default class Math extends React.Component{}

3.  

4. // main.js

5. import Math from "./Math";

目前很少JS引擎能直接支持 ES6 标准，因此 Babel 的做法实际上是将不被支持的import翻译成目前已被支持的require。

 

ES6详解八：模块（Module）

 

基本用法

命名导出(named exports)

可以直接在任何变量或者函数前面加上一个 export 关键字，就可以将它导出。 
这种写法非常简洁，和平时几乎没有区别，唯一的区别就是在需要导出的地方加上一个 export 关键字。 
比如：

1. export const sqrt = Math.sqrt;

2. export function square(x) {

3. return x * x;

4. }

5. export function diag(x, y) {

6. return sqrt(square(x) + square(y));

7. }

然后在另一个文件中这样引用：

1. import { square, diag } from 'lib';

2. console.log(square(11)); // 121

3. console.log(diag(4, 3));

你可能会注意到这个奇怪的语法 { square, diag } 不就是前面讲过的 destructing吗。所以你会以为还可以这样写：

1. import lib from 'lib';

2. square = lib.square;

但是其实这样是错的，因为 import { square, diag } from 'lib’; 是import的特有语法，并不是 destructing 语法，所以其实import的时候并不是直接把整个模块以对象的形式引入的。

如果你希望能通过 lib.square 的形式来写，你应该这样导入：

1. import * as lib from 'lib';

2. square = lib.square;

不过值得注意的一点是，如果你直接用babel编译，执行是会报错的。因为 babel 并不会完全编译 modules，他只是把 ES6 的modules语法编译成了 CMD 的语法，所以还需要用 browserify 之类的工具再次编译一遍。 
如果你发现 browserify 找不到 lib，可以改成 from ‘./lib’ 试试。

默认导出

大家会发现上面的写法比较麻烦，因为必须要指定一个名字。其实很多时候一个模块只导出了一个变量，根本没必要指定一个名字。 
还有一种用法叫默认导出，就是指定一个变量作为默认值导出：

1. //------ myFunc.js ------

2. export default function () { ... };

3.  

4. //------ main1.js ------

5. import myFunc from 'myFunc';

6. myFunc();

默认导出的时候不需要指定一个变量名，它默认就是文件名。 
这里的区别不仅仅是不用写名字，而是 导出的默认值就是模块本身，而不是模块下面的一个属性，即是 import myFunc from 'myFunc’; 而不是 import {myFunc} from 'myFunc’;

命名导出结合默认导出

默认导出同样可以结合命名导出来使用：

1. export default function (obj) {

2. ...

3. };

4. export function each(obj, iterator, context) {

5. ...

6. }

7. export { each as forEach };

上面的代码导出了一个默认的函数，然后由导出了两个命名函数，我们可以这样导入：

 import _, { each } from 'underscore';

• 1
• 2

注意这个逗号语法，分割了默认导出和命名导出

其实这个默认导出只是一个特殊的名字叫 default，你也可以就直接用他的名字，把它当做命名导出来用，下面两种写法是等价的：

1. import { default as foo } from 'lib';

2. import foo from 'lib';

同样的，你也可以通过显示指定 default 名字来做默认导出, 下面两种写法是一样的：

1. //------ module1.js ------

2. export default 123;

3.  

4. //------ module2.js ------

5. const D = 123;

6. export { D as default };

仅支持静态导入导出

ES6规范只支持静态的导入和导出，也就是必须要在编译时就能确定，在运行时才能确定的是不行的，比如下面的代码就是不对的：

1. //动态导入

2. var mylib;

3. if (Math.random()) {

4. mylib = require('foo');

5. } else {

6. mylib = require('bar');

7. }

8. //动态导出

9. if (Math.random()) {

10. exports.baz = ...;

11. }

为什么要这么做，主要是两点：

1. 性能，在编译阶段即完成所有模块导入，如果在运行时进行会降低速度
2. 更好的检查错误，比如对变量类型进行检查

各种导入和导出方式总结

总结一下，ES6提供了如下几种导入方式：

1. // Default exports and named exports

2. import theDefault, { named1, named2 } from 'src/mylib';

3. import theDefault from 'src/mylib';

4. import { named1, named2 } from 'src/mylib';

5.  

6. // Renaming: import named1 as myNamed1

7. import { named1 as myNamed1, named2 } from 'src/mylib';

8.  

9. // Importing the module as an object

10. // (with one property per named export)

11. import * as mylib from 'src/mylib';

12.  

13. // Only load the module, don’t import anything

14. import 'src/mylib';

如下几种导出方式：

1. //命名导出

2. export var myVar1 = ...;

3. export let myVar2 = ...;

4. export const MY_CONST = ...;

5.  

6. export function myFunc() {

7. ...

8. }

9. export function* myGeneratorFunc() {

10. ...

11. }

12. export class MyClass {

13. ...

14. }

15. // default 导出

16. export default 123;

17. export default function (x) {

18. return x

19. };

20. export default x => x;

21. export default class {

22. constructor(x, y) {

23. this.x = x;

24. this.y = y;

25. }

26. };

27. //也可以自己列出所有导出内容

28. const MY_CONST = ...;

29. function myFunc() {

30. ...

31. }

32.  

33. export { MY_CONST, myFunc };

34. //或者在导出的时候给他们改个名字

35. export { MY_CONST as THE_CONST, myFunc as theFunc };

36.  

37. //还可以导出从其他地方导入的模块

38. export * from 'src/other_module';

39. export { foo, bar } from 'src/other_module';

40. export { foo as myFoo, bar } from 'src/other_module';

 

浅谈webpack打包原理

模块化机制

webpack并不强制你使用某种模块化方案，而是通过兼容所有模块化方案让你无痛接入项目。有了webpack，你可以随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好的。

关于模块化的一些内容，可以看看我之前的文章：js的模块化进程

核心思想：

1. 一切皆模块： 
   正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
2. 按需加载： 
   传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

文件管理

• 每个文件都是一个资源，可以用require/import导入js
• 每个入口文件会把自己所依赖(即require)的资源全部打包在一起，一个资源多次引用的话，只会打包一份
• 对于多个入口的情况，其实就是分别独立的执行单个入口情况，每个入口文件不相干(可用CommonsChunkPlugin优化)

打包原理

把所有依赖打包成一个bundle.js文件，通过代码分割成单元片段并按需加载。

如图，entry.js是入口文件，调用了util1.js和util2.js，而util1.js又调用了util2.js。

打包后的bundle.js例子

1. /******/ ([

2. /* 0 */ //模块id

3. /***/ function(module, exports, __webpack_require__) {

4.  

5. __webpack_require__(1); //require资源文件id

6. __webpack_require__(2);

7.  

8. /***/ },

9. /* 1 */

10. /***/ function(module, exports, __webpack_require__) {

11. //util1.js文件

12. __webpack_require__(2);

13. var util1=1;

14. exports.util1=util1;

15.  

16. /***/ },

17. /* 2 */

18. /***/ function(module, exports) {

19. //util2.js文件

20. var util2=1;

21. exports.util2=util2;

22.  

23. /***/ }

24. ...

25. ...

26. /******/ ]);

27. bundle.js是以模块 id 为记号，通过函数把各个文件依赖封装达到分割效果，如上代码 id 为 0 表示 entry 模块需要的依赖， 1 表示 util1模块需要的依赖
28. require资源文件 id 表示该文件需要加载的各个模块，如上代码_webpack_require__(1) 表示 util1.js 模块，__webpack_require__(2) 表示 util2.js 模块
29. exports.util1=util1 模块化的体现，输出该模块