通过 Webpack打包,了解不同的“模块定义”

webpack 打包输出方式

在webpack config中有两个属性

output.library 设置打包输入的library名

output.libraryTarge 设置打包方式

  • var var MyLibrary = entry_return; (默认)

  • this this[“MyLibrary”] = entry_return;

  • window window[“MyLibrary”] = entry_return;

  • global global[“MyLibrary”] = entry_return;

  • commonjs exports[“Library”] = xxx

  • commonjs2 module.exports = xxx

  • amd Export to AMD

  • umd Export to AMD, CommonJS2 or as property in root

    当配置为this commonjs 时而没有设置 output.library 打包时会复制导出对象的每个属性,即将每个属性都绑定到 this 或者 exports。

    varthis 方式适合在浏览器中直接运行,通过src方式引入的话,其实两者都是将Library帮到到了window。

    commonjs 适用于用标准commonjs引入

    commonjs2 适用于Node.js

    amd 适用于requireJs

    umd 同时支持了 AMD, CommonJS2, CommonJS 和 绑定到全局变量的方式(浏览器运行)

    会有类似下面代码做各种模块加载支持

       !function(e, t) {
         "object" == typeof exports && "object" == typeof module ? module.exports = t() :
         "function" == typeof define && define.amd ? define([], t) : 
         "object" == typeof exports ? exports.Iceter = t() : e.Iceter = t()
      }(this, function()) {}
    

    AMD、CommonJS、UMD

    AMD

    Asynchronous module definition (异步模块定义),多用于浏览器端,典型的实现RequireJS。AMD可以异步加载模块,即便相互依赖的模块也可以分别加载,在所有依赖加载完成后运行,这对于浏览器来说不会发生阻塞,对页面加载有重要意义。

    CommonJS

    CommonJS是同步加载模块,NodeJS的module算是CommonJS的部分的实现。因为是同步加载所以不适用于浏览器端。

    Webpack里面提到的commonjs 完全符合CommonJS定义语法的输出,而像Node.js 用module.export 代替 exports并不完全符合CommonJS所以用commonjs2表示,这里只是Webpack对两种形式做的区分。

    CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式,可以使每个模块它自身的命名空间中执行。该规范的主要内容是,模块必须通过 module.exports 导出对外的变量或接口,通过 require() 来导入其他模块的输出到当前模块作用域中。

    UMD

    Universal Module Definition(通用模块定义), 支持了 AMD, CommonJS2, CommonJS 和 绑定到全局变量的方式。