P.S. 由于参考文章是2016年的文章,有些知识需要更新。所以这篇文章还会继续更新。
2.1 什么是模块打包(module bundling)
从一个high-level的角度说,模块打包指的是以正确的顺序把一组模块处理成一个单独的文件。
进一步来看,如果没有模块打包,我们必须在HTML文件中插入<script>标签来加载每个模块,页面加载时间将会变得很长吧。为了解决这个问题,我们对模块进行打包,或者说拼接,而不是单独引入每个模块。另一方面,我们还可以对文件进行压缩,从源码中去掉一些不必要的字符从而得到min版本。
像Gulp和Grunt这样的task runner就可以处理代码的拼接和压缩。
2.2 打包模块的不同方法
如果你只是使用了标准的module pattern,那对JS代码的打包和压缩是很简单的,只需要把这些原生JS代码粘连在一起就可以了。但是如果你使用了浏览器无法解析的非原生的模块系统,如CommonJS或AMD,就需要一种特殊的工具去将这些代码转换成浏览器能理解的代码。这就是Browserify、RequireJS、Webpack以及其他所谓module bundlers或module loaders所做的事。
除了打包/加载模块,module bundlers还提供一些额外的特性,比如auto-recompiling。接下来就来看看模块打包方法吧:
2.2.1 打包CommonJS
在上一章我们说过,CommonJS模块是同步加载,这对浏览器端很不友好。Browserify是一个将CommonJS模块编译成浏览器可解析代码的工具。
2.2.2 打包AMD
如果你使用AMD,你需要