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.AMO