WEB 前端模块化方案完全总结

注意：不要使用 import，import 是 ES6 的语法。想要在浏览器环境中使用，需要在 index.js 中将模块导入，然后 node 使用如下命令：

browserify index.js -o bundle.js

前提是安装了 browserify 这个包，然后在 html 里面引入 bundle.js 即可。

AMD，CMD，异步模块定义

---

AMD

不同于 CommonJs，AMD 是异步加载，名称就是 Asynchronous Module Difinition，允许指定回调函数，等异步加载完成之后即可调用回调函数。AMD 的核心思想就是通过 define 来定义模块，然后通过 require 来加载模块，它依赖于 require.js，在 html 文件里面引入 script：

定义模块 m1

define([模块名称], [依赖模块], function(){

name: ‘vey-module-1’,

getName: function(){

return name

}

return {getName: getName}

})

上面的模块名称定义此模块的名称，不写则默认为文件名去掉后缀。依赖模块指定此模块依赖的模块，类型为数组。此模块的内容定义在 function 里面。

再定义一个模块 m2

define([‘m1’], function(m1){

name: ‘vey-module-2’,

function show() {

console.log(name, m1.getName())

}

return { show }

})

定义 index.js

(function(){

// 配置模块的路径

require.config({

paths: {

m1: ‘./m1’

m2: ‘./m2’

}

})

require([‘m2’], function(m2){

m2.show()

})

})()

然后就可以看到执行结果了。

AMD是依赖前置的，即不管你用没用到，只要你设置了依赖就会去加载，不是按需加载的。

上面的代码在浏览器里运行，会先后发生这些事情：

• 它首先根据指定的require.js加载require.js；

• 加载完成后，require.js会在所有的 script 标签里寻找 data-main 属性指定的路径文件作为下一个将要加载的脚本，在这