JS的模块化 ES6模块化及webpack打包
js的模块化进程
现在前端技术日新月异，对于同一个问题痛点，各个时段有各自的解决方案，这就带来了很大差异。今天我就打算梳理js模块化的历史进程，讲一讲这些方案要做什么，怎么做。
js模块化进程的起因
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。当一个项目开发的越来越复杂的时候，你会遇到一些问题：命名冲突（变量和函数命名可能相同），文件依赖（引入外部的文件数目、顺序问题）等。
JavaScript发展的越来越快，超过了它产生时候的自我定位。这时候js模块化就出现了。
什么是模块化
模块化开发是一种管理方式，是一种生产方式，一种解决问题的方案。他按照功能将一个软件切分成许多部分单独开发,然后再组装起来,每一个部分即为模块。当使用模块化开发的时候可以避免刚刚的问题，并且让开发的效率变高，以及方便后期的维护。
js模块化进程
一、早期：script标签
这是最原始的 JavaScript 文件加载方式，如果把每一个文件看做是一个模块，那么他们的接口通常是暴露在全局作用域下，也就是定义在 window 对象中。
缺点：
1.污染全局作用域
2.只能按script标签书写顺序加载
3.文件依赖关系靠开发者主观解决
二、发展一：CommonJS规范
允许模块通过require方法来同步加载（同步意味阻塞）所要依赖的其他模块，然后通过module.exports来导出需要暴露的接口。
-
// module add.js -
module.exports = function add (a, b) { return a + b; } -
// main.js -
var {add} = require('./math'); -
console.log('1 + 2 = ' + add(1,2);
CommonJS 是以在浏览器环境之外构建JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。
三、发展二：AMD/CMD
（1）AMD
AMD 是 RequireJS 在推广过程中对模块定义的规范化产出（异步模块定义）。
AMD标准中定义了以下两个API：
- require([module], callback);
- define(id, [depends], callback);
require接口用来加载一系列模块，define接口用来定义并暴露一个模块。
-
define(['./a', './b'], function(a, b) { -
// 依赖必须一开始就写好 -
a.add1() -
... -
b.add2() -
... -
})
优点：
1、适合在浏览器环境中异步加载模块 2、可以并行加载多个模块
（2）CMD
CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。(在CommomJS和AMD基础上提出)
-
define(function (requie, exports, module) { -
//依赖可以就近书写 -
var a = require('./a'); -
a.add1(); -
... -
if (status) { -
var b = requie('./b'); -
b.add2(); -
} -
});
优点：
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关键字引用模块。
-
// module math.jsx -
export default class Math extends React.Component{} -
// main.js -
import Math from "./Math";
目前很少JS引擎能直接支持 ES6 标准，因此 Babel 的做法实际上是将不被支持的import翻译成目前已被支持的require。
ES6详解八：模块（Module）
基本用法
命名导出(named exports)
可以直接在任何变量或者函数前面加上一个 export 关键字，就可以将它导出。
这种写法非常简洁，和平时几乎没有区别，唯一的区别就是在需要导出的地方加上一个 export 关键字。
比如：
-
export const sqrt = Math.sqrt; -
export function square(x) { -
return x * x; -
} -
export function diag(x, y) { -
return sqrt(square(x) + square(y)); -
}
然后在另一个文件中这样引用：
-
import { square, diag } from 'lib'; -
console.log(square(11)); // 121 -
console.log(diag(4, 3));
你可能会注意到这个奇怪的语法 { square, diag } 不就是前面讲过的 destructing吗。所以你会以为还可以这样写：
-
import lib from 'lib'; -
square = lib.square;
但是其实这样是错的，因为 import { square, diag } from 'lib’; 是import的特有语法，并不是 destructing 语法，所以其实import的时候并不是直接把整个模块以对象的形式引入的。
如果你希望能通过 lib.square 的形式来写，你应该这样导入：
-
import * as lib from 'lib'; -
square = lib.square;
不过值得注意的一点是，如果你直接用babel编译，执行是会报错的。因为 babel 并不会完全编译 modules，他只是把 ES6 的modules语法编译成了 CMD 的语法，所以还需要用 browserify 之类的工具再次编译一遍。
如果你发现 browserify 找不到 lib，可以改成 from ‘./lib’ 试试。
默认导出
大家会发现上面的写法比较麻烦，因为必须要指定一个名字。其实很多时候一个模块只导出了一个变量，根本没必要指定一个名字。
还有一种用法叫默认导出，就是指定一个变量作为默认值导出：
-
//------ myFunc.js ------ -
export default function () { ... }; -
//------ main1.js ------ -
import myFunc from 'myFunc'; -
myFunc();
默认导出的时候不需要指定一个变量名，它默认就是文件名。
这里的区别不仅仅是不用写名字，而是 导出的默认值就是模块本身，而不是模块下面的一个属性，即是 import myFunc from 'myFunc’; 而不是 import {myFunc} from 'myFunc’;
命名导出结合默认导出
默认导出同样可以结合命名导出来使用：
-
export default function (obj) { -
... -
}; -
export function each(obj, iterator, context) { -
... -
} -
export { each as forEach };
上面的代码导出了一个默认的函数，然后由导出了两个命名函数，我们可以这样导入：
import _, { each } from 'underscore';
- 1
- 2
注意这个逗号语法，分割了默认导出和命名导出
其实这个默认导出只是一个特殊的名字叫 default，你也可以就直接用他的名字，把它当做命名导出来用，下面两种写法是等价的：
-
import { default as foo } from 'lib'; -
import foo from 'lib';
同样的，你也可以通过显示指定 default 名字来做默认导出, 下面两种写法是一样的：
-
//------ module1.js ------ -
export default 123; -
//------ module2.js ------ -
const D = 123; -
export { D as default };
仅支持静态导入导出
ES6规范只支持静态的导入和导出，也就是必须要在编译时就能确定，在运行时才能确定的是不行的，比如下面的代码就是不对的：
-
//动态导入 -
var mylib; -
if (Math.random()) { -
mylib = require('foo'); -
} else { -
mylib = require('bar'); -
} -
//动态导出 -
if (Math.random()) { -
exports.baz = ...; -
}
为什么要这么做，主要是两点：
- 性能，在编译阶段即完成所有模块导入，如果在运行时进行会降低速度
- 更好的检查错误，比如对变量类型进行检查
各种导入和导出方式总结
总结一下，ES6提供了如下几种导入方式：
-
// Default exports and named exports -
import theDefault, { named1, named2 } from 'src/mylib'; -
import theDefault from 'src/mylib'; -
import { named1, named2 } from 'src/mylib'; -
// Renaming: import named1 as myNamed1 -
import { named1 as myNamed1, named2 } from 'src/mylib'; -
// Importing the module as an object -
// (with one property per named export) -
import * as mylib from 'src/mylib'; -
// Only load the module, don’t import anything -
import 'src/mylib';
如下几种导出方式：
-
//命名导出 -
export var myVar1 = ...; -
export let myVar2 = ...; -
export const MY_CONST = ...; -
export function myFunc() { -
... -
} -
export function* myGeneratorFunc() { -
... -
} -
export class MyClass { -
... -
} -
// default 导出 -
export default 123; -
export default function (x) { -
return x -
}; -
export default x => x; -
export default class { -
constructor(x, y) { -
this.x = x; -
this.y = y; -
} -
}; -
//也可以自己列出所有导出内容 -
const MY_CONST = ...; -
function myFunc() { -
... -
} -
export { MY_CONST, myFunc }; -
//或者在导出的时候给他们改个名字 -
export { MY_CONST as THE_CONST, myFunc as theFunc }; -
//还可以导出从其他地方导入的模块 -
export * from 'src/other_module'; -
export { foo, bar } from 'src/other_module'; -
export { foo as myFoo, bar } from 'src/other_module';
浅谈webpack打包原理
模块化机制
webpack并不强制你使用某种模块化方案，而是通过兼容所有模块化方案让你无痛接入项目。有了webpack，你可以随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好的。
关于模块化的一些内容，可以看看我之前的文章：js的模块化进程
核心思想：
- 一切皆模块：
正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。 - 按需加载：
传统的模块打包工具（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例子
-
/******/ ([ -
/* 0 */ //模块id -
/***/ function(module, exports, __webpack_require__) { -
__webpack_require__(1); //require资源文件id -
__webpack_require__(2); -
/***/ }, -
/* 1 */ -
/***/ function(module, exports, __webpack_require__) { -
//util1.js文件 -
__webpack_require__(2); -
var util1=1; -
exports.util1=util1; -
/***/ }, -
/* 2 */ -
/***/ function(module, exports) { -
//util2.js文件 -
var util2=1; -
exports.util2=util2; -
/***/ } -
... -
... -
/******/ ]); - bundle.js是以模块 id 为记号，通过函数把各个文件依赖封装达到分割效果，如上代码 id 为 0 表示 entry 模块需要的依赖， 1 表示 util1模块需要的依赖
- require资源文件 id 表示该文件需要加载的各个模块，如上代码
_webpack_require__(1)表示 util1.js 模块，__webpack_require__(2)表示 util2.js 模块 exports.util1=util1模块化的体现，输出该模块