js模块化总结小白知识
从前端打包的历史谈起
在很长的一段前端历史里,是不存在打包这个说法的。那个时候页面基本是纯静态的或者服务端输出的, 没有 AJAX,也没有 jQuery。Google 推出 Gmail 的时候(2004 年),XMLHttpRequest, 也就是我们俗称的 AJAX被拾起的时候,前端开发者开始往页面里插入各种库和插件,我们的 js 文件程指数倍的开始增加了。JSMin、YUI Compressor、Closure Compiler、UglifyJS 等 js 文件压缩合并工具陆陆续续诞生了。压缩工具是有了,但我们得要执行它,最简单的办法呢,就是 windows 上搞个 bat 脚本,mac / linux 上搞个 bash 脚本,哪几个文件要合并在一块的,哪几个要压缩的,发布的时候运行一下脚本,生成压缩后的文件。
这时候commonJS出现了,如果想在a.js引入b.js和c.js,大概语法是
var b = require(./b.js);
var c = require(./c.js);
b.js和c.js导出方式是大概这样的
exports.add = function(a, b) {
return a+b;
}
然后再a.js中可以使用b模块的add方法
var n = b.add(5, 8);
// b.js
module.exports = {
add(a, b){
return a+b;
}
}
// or
exports.add = function(a,b) {
return a+b;
}
// a.js
var b = require('./b.js');
var n = b.add(5,8);
上述代码中, module.exports 和 exports 很容易混淆,下面看下大致的内部实现
var module = require('./b.js');
module.add
// 包装了一层立即执行函数,防止全局变量污染,重要的是module,module是node独有的一个变量
module.exports = {
add: function(a,b) {
return a+b;
}
}
// 基本实现
var module = {
exports: {} // exports是个空对象
}
var exports = module.exports
var load = function(module) {
// 需要导出的东西
var add = function(a, b) {
return a+b;
}
module.exports = add;
return module.exports;
}
module.exports和exports用法一模一样,但是不能对exports直接赋值,没有任何效果。
但是commonJS是node独有的规范,浏览器中并不适用,因为require()的返回是同步的,服务器加载资源的时候并不能异步的读取。在浏览器中如果使用这种方式就会堵塞js脚本的执行,所以浏览器中只能使用Browserify解析。Browserify和webpack几乎同时出现,简单介绍下Browserify: 其目的是让前端也能使用commonJS的语法来加载js,它会从入口js开始,把所有的require()调用文件打包并合并到一个文件,这样就解决了异步加载的问题。但是对比webpack,他的缺点也是明显的:
所以webpack一统了天下。
于是,在commonJS的基础上,2011又出现了 Asynchronous Module Definition,也是就是AMD规范,AMD规范使用异步回调的语法来并行下载多个依赖项,基本语法如下
require(['./b.js', './c.js'], function(b,c){
var n = b.add(5,8);
console.log(c)
})
同时,导出的时候也需要使用异步回调的方式,比如,c模块又依赖了d.js
defined(['./d'], function(d){
return d.PI
})
总结下AMD: 定义模块使用defined()函数,引入使用reqire()函数,两者的区别是,前者必须要在回调函数中返回一个值作为导出的东西,后者确不需要任何导出,同时也无法作为被依赖项被其他文件导入,因此一般用于入口文件。
AMD是由RequireJS提出的。如果想了解可以查看其文档。但是现在基本已经被淘汰了。
js的模块化问题解决后,css模块化也被各种各样的css预处理器所处理: less、sass、stylus、scss等等。
后来有了ES6规范,提出了模块化的概念,配合babel可以直接使用 ES6模块化
// b.js
export function a() {}
export function b() {}
// c.js
export default function() {}
// a.js
import {a, b} from './b.js'
import ModuleC from './c.js'
对于commonJS和ES6 module 的区别简单总结如下: