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

采用第三方开发的模块依赖处理库来实现模块化:AMDCommonJSES6

这三种方案的实现对比:

AMD: define + require

CMD: exports + require

ES6: export + import(由于ES6本身是原生语言支持实现的模块化,但是现代浏览器大多都还未支持,因此必须使用相应的transpiler工具转换成ES5AMD,CMD模块,再借助于systemjs/requirejs等模块加载工具才能使用。其中ES6transpiler(代码转换器)一般是用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来实现AMDCMD的转换!!


猜你喜欢

转载自blog.csdn.net/linyeban/article/details/55224689