共计 3400 个字符,预计需要花费 9 分钟才能阅读完成。
一. 模块化乱炖
脚本合并 是基于模块化标准的,javascript
模块化是一个十分凌乱的话题,各种 【MD】 标准乱飞还要外加一堆【.js】的标准实现。现代化前端我的项目多基于框架进行开发,较为风行的框架外部根本曾经对立遵循 ES6
的模块化规范,只管反对度不一,但通过构建工具能够解决浏览器反对滞后的问题;基于 nodejs
的服务端我的项目原生反对 CommonJs
规范;而开发中引入的一些工具类的库,热门的工具类库为了能同时兼容浏览器和 node 环境,通常会应用 UMD
规范(Universal Module Definition)来实现模块化,对 UMD
范式不理解的读者能够先浏览《javascript 根底修炼(4)——UMD 标准的代码推演》一文,甚至有些第三方库并没有遵循任何模块化计划。如果不借助构建工具,想要对各类计划实现兼容是非常复杂的。
二. webpack 与模块化
webpack
默认反对的是 CommonJs
标准,毕竟它是 nodejs
反对的模块治理形式,而没有 node
哪来的 webpack
。但同时为了扩大其应用场景,webpack
在版本迭代中也退出了对 ES harmony
标准和 AMD
标准的兼容。
webpack 如何辨认 CommonJs 模块
webpack
打包后输入文件的根本构造是上面这个样子的:
(function(modules) { // webpackBootstrap
// 模块缓存对象
var installedModules = {};
// webpack 外部的模块援用函数
function __webpack_require__(moduleId) {
// 加载入口 JS
// 输入
return module.exports;
}
// 挂载模块数组
__webpack_require__.m = modules;
// ...
// 在__webpack_require__挂载多个属性
// 传入入口 JS 模块 ID 执行函数并输出模块
return __webpack_require__(__webpack_require__.s = 0);
});
// 蕴含所有模块的数组
([
/* id 为 0 */
(function(module, exports) {console.log('1')
})
]);
简化当前实际上就是一个自执行函数:
(function(modules){return __webpack_require__(0);
}([Module0,Module1...]))
能够看到 __webpack_reqruie__()
这个办法的参数就是模块的惟一 ID 标识,返回值就是 module.exports
,所以webpack
对于 CommonJs
标准是原生反对的。
webpack 如何辨认 ES Harmony 模块
对于 ES Harmony
标准不相熟的能够查看《ES6 Module 语法》一文。
先应用 import
命令加载一个 CommonJs
标准导出的模块,查看打包后的代码能够看到模块援用的局部被转换成了上面这样:
__webpack_require__.r(__webpack_exports__);
/* harmony import */
var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./components/component10k.js");
/* harmony import */
var _components_component10k_js__WEBPACK_IMPORTED_MODULE_0___default = __webpack_require__.n(_components_component10k_js__WEBPACK_IMPORTED_MODULE_0__);
简化一下再来看:
__webpack_require__.r(__webpack_exports__);
var a = __webpack_require__("./components/component10k.js");
var b = __webpack_require__.n(a);
这里波及到两个工具函数:
这个办法是给模块的 exports
对象加上 ES Harmony
标准的标记,如果反对 Symbol
对象,则为 exports
对象的 Symbol.toStringTag 属性赋值 Module, 这样做的后果是 exports
对象在调用 toString 办法时会返回 ’Module’(笔者并没有查到这种写法的原因); 如果不反对 Symbol
对象,则将 exports.__esModule
赋值为 true。
另一个工具函数是:
传入了一个模块,返回一个 getter 办法,此处是一个高阶函数的利用,实现的性能是当模块的 __esModule
属性为真时,返回一个 getDefault()
办法,否则返回 getModuleExports()
办法.
回过头再来看下面的简化代码:
// 增加 ES Harmony 标准模块标记
__webpack_require__.r(__webpack_exports__);
// a 实际上失去了模块通过 module.exports 输入的对象
var a = __webpack_require__("./components/component10k.js");
// 依据 a 的模块化标准类型返回不同的 getter 函数,当 getter 函数执行时才会真正失去模块对象
var b = __webpack_require__.n(a);
总结一下,
webpack
所做的解决相当于对模块减少了代理,如果被加载模块合乎ES Harmony
标准,则返回module['default']
,否则返回module
。这里的 module 泛指模块输入的对象。
再应用 import
加载一个应用 export
语法输入的 ES Harmony
模块,查看打包后果中的模块文件能够看到:
//component10k.js 模块文件在 main.bundle.js 中的内容
__webpack_require__.r(__webpack_exports__);
__webpack_exports__["default"] = (function(){Array.from('component10k');
})
能够看到输入的内容间接绑定到了输出模块的 default 属性上,因为这个模块被打上了 __esModule
的标记,所以援用它的模块会通过 module[‘default’]来取用其内容,也就正好命中了模块的输入内容。
webpack 如何辨认 AMD 模块
咱们将 component10k.js
模块改为用 AMD
标准定义:
define(function(){console.log('test');
})
查看通过 webpack
打包后,这个模块变成了如下的样子:
var __WEBPACK_AMD_DEFINE_RESULT__;
!(__WEBPACK_AMD_DEFINE_RESULT__ = (function(){console.log('test');
}).call(exports, __webpack_require__, exports, module), __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
简化一下:
var result;
!(result=(function(){}).call(...),result!==undefined && module.exports = result);
形象一下:
var result;
!(expression1,expression2 && expression3)
这里波及的 javascript 的基本知识较多,逗号表达式的优先级最低,所以最初参加运算,逗号表达式会从左到右顺次执行语句,并返回最初一个表达式的后果,&& 为短路运算语法,即前一个条件成立时才计算前面的表达式,赋值语句执行完后会将所赋的值返回。此处外层的 !(expression)
语法起了什么作用,笔者也没看懂,心愿理解的读者多多指教。
所以,
webpack
对于AMD
模块的解决,实际上是加了一层封装,将模块运行的后果挂载到了webpack
模块的 module.exports 对象上。