webpack深入浅出系列-1-前端的发展

webpack深入浅出系列 -1- 前端的发展

1.1.1模块化

模块化是指将一个复杂的系统分解为多个模块以方便编码。

很久以前，开发网页要通过命名空间的方式来组织代码，这样做有很多问题，其中包括：

命名空间冲突，两个库可能会使用同一个名称，例如 Zepto ( http://zeptojs.com ）也被放在 w工 ndow.$ 下：
无法合理地管理项目的依赖和版本：
无法方便地控制依赖的加载顺序。

当项目变大时，这种方式将变得难以维护，需要用模块化的思想来组织代码。

1. CommonJS

CommonJS ( http://www.commonjs.org ）是一种被广泛使用的 JavaScript 模块化规范，其核心思想是通过 require 方法来同步加载依赖的其他模块，通过 module.exports 导出需要暴露的接口。 CommonJS 规范的流行得益于 Node.js 采用了这种方式，后来这种方式被引入到了网页开发中。

采用 CommonJS 导入及导出的代码如下：

// 导入 
const moduleA = require ( ’. / moduleA ’); 
// 导出 
module .exports = moduleA.someFunc;

CommonJS 的优点在于：

代码可复用于 Node.js 环境下井运行，例如做同构应用：
通过 Npm 发布的很多第三方模块都采用了 CommonJS 规范。

CommonJS 的缺点在于，这样的代码无法直接运行在浏览器环境下，必须通过工具转换成标准的 ES5 。

CommonJS 还可以细分为 CommonJSl 和 CommonJS2 ，区别在于 CommonJSl 只能通过 exports . XX = XX 的方式导出，而 CommonJS2 在 CommonJSl 的基础上加入了 module. export s = XX 的导出方式。 CommonJS 通常指 CommonJS2 。

2.AMD

AMD(https://en.wikipedia.org/wiki...）
也是一种JavaScript模块化规范，与CommonJS最大的不同在于，它采用了异步的方式去加载依赖的模块。MD规范主要用于解决针对浏览器环境的模块化问题，最具代表性的实现是requirejs(http://requirejs.org）。

采用 AMD 导入及导出的代码如下：

// 定义一个模块 
define (’ module ’,[’ dep ’] , function (dep) { 
return exports; 
}); 
//导入和使用 
require ( [’ module ’] , function (module) { });

AMD 的优点在于：

可在不转换代码的情况下直接在浏览器中运行；
可异步加载依赖：
可并行加载多个依赖：
代码可运行在浏览器环境和 Node.js 环境下。

AMD 的缺点在于 JavaScript 运行环境没有原生支持 A岛。，需要先导入实现了 AMD 的库
后才能正常使用。

ES6 模块化

ES6 模块化是国际标准化组织 ECMA提出的 JavaScript 模块化规范，它在语言层面上实现了模块化。浏览器厂商和 Node.都宣布要原生支持该规范。它将逐渐取代CommonJS 和 AMD规范，成为浏览器和服务器通用的模块解决方案。

采用 ES6 模块化导入及导出的代码如下：
// 导入
import { readFile } from ’fs’;
import React from ’react ’;
// 导出
export function hello {) { } ; export default {
//

webpack深入浅出系列-1-前端的发展