前端的四种模块化方案(webpack/require.js/seajs/browserify

来源：互联网发布：淘宝上新抢拍技巧编辑：程序博客网时间：2024/05/17 04:42

http://hackhat.com/p/110/module-loader-webpack-vs-requirejs-vs-browserify/

https://zhidao.baidu.com/question/1799220342210982227.html

模块化方案最主要的是针对javascript代码，将其可以直接利用加载的一些库。

http://www.cnblogs.com/kidsitcn/p/5400205.html：javascript

不具备原生的模块化技能，因此需要采用第三方开发的模块依赖处理库来实现模块化：AMD、CommonJS、ES6

这三种方案的实现对比：

AMD: define + require

CMD: exports + require

ES6: export + import（由于ES6本身是原生语言支持实现的模块化，但是现代浏览器大多都还未支持，因此必须使用相应的transpiler工具转换成ES5的AMD,CMD模块，再借助于systemjs/requirejs等模块加载工具才能使用。其中ES6的transpiler（代码转换器）一般是用babel，他的作用是将ES6）

有一个大神画的图，请看

js语言本身并不支持模块化，同时浏览器中js和服务端nodejs中的js运行环境是不同的，如何实现浏览器中js模块化主流有两种方案：

1. requirejs/seajs: 是一种在线“编译”模块的方案，相当于在页面上加载一个CommonJS/AMD模块格式解释器。这样浏览器就认识了define, exports,module这些东西，也就实现了模块化。

2.browserify/webpack：是一个预编译模块打包的方案，相比于第一种方案，这个方案更加智能。由于是预编译的，不需要在浏览器中加载解释器。你在本地直接写JS，不管是AMD/CMD/ES6风格的模块化，它都能认识，并且编译成浏览器认识的JS。注意： browerify打包器本身只支持Commonjs模块，如果要打包AMD模块，则需要另外的plugin来实现AMD到CMD的转换！！https://github.com/jaredhanson/deamdify

http://www.itdadao.com/articles/c15a1074967p0.html（前端集成解决方案）

0 0