Webpack入门，模块打包之加载其他类型的模块

ZERO • 2022年11月14日 • 教程 • 阅读 608

在实际开发中，开发者可能遇到其他类型的模块，比如AMD、UMD模块，虽然这些模块在目前的使用场景已经不多，但是遇到这些模块时仍然需要知道如何处理。

加载非模块化的文件

非模块化文件指的是并不遵循任何一种模块标准的文件。最常见的就是引入JQuery及其各种插件。

如何使用Webpack打包这类文件呢？其实只需要直接引入即可：import './jquery.min.js';这句代码会直接执行jquery.min.js。一般来说，jQuery这类库都是将其接口绑定在全局，因此无论是从script标签引入，还是使用Webpack打包的方式引入，其最终效果是一样的。

加载AMD模块

AMD（Asynchronous Module Definition，异步模块定义）是由JavaScript社区提出的专注于支持浏览器端模块化的标准。从名字就可以看出它与CommonJS和ES6 Module最大的区别在于它加载模块的方式是异步的。

在AMD中使用define函数来定义模块，它可以接收3个参数。第一个参数是当前模块的ID【可选】，相当于模块名；第二个参数是当前模块的依赖【可选，亦可为空】；第三个参数用来描述模块的导出值，可以是函数或对象。如果是函数则导出的是函数的返回值；如果是对象则直接导出对象本身。

// example.js
define([], function () {
  return {
    sayHello: function () {
      console.log("hello world!");
    },
  };
});

和CommonJS类似，AMD也使用require函数来加载模块，只不过采用异步的形式。

define(["./example.js"], function (example) {
  example();
});

require的第一个参数指定了加载的模块，第二个参数是当加载完成后执行的回调函数。

通过AMD这种形式定义模块的好处在于其模块加载是非阻塞性的，当执行到require函数时并不会停下来去执行被加载的模块，而是继续执行require后面的代码，使得模块加载操作并不会阻塞浏览器。

尽管AMD的设计理念很好，但与同步加载的模块标准相比其语法要更加冗长。另外其异步加载的方式没有同步加载的方式清晰，并且容易造成回调地狱（callback hell）。

加载UMD模块

严格来说，UMD并不是一种模块标准，而是一组模块形式的集合。UMD的全称是Universal Module Definition，也就是通用模块标准，它的目标是使一个模块能运行在各种环境下。

(function(global,main) {
  // 根据当前环境采取不同的导出方式
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(...);
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = ...;
  } else {
    // 非模块化环境
    global.add == ...;
  }
}(this,function(){
  // 定义模块主体
  return {...}
}));

可以看出，UMD其实就是根据当前全局对象的值判断目前处于哪种模块环境，就选择适合模块环境的导出方式进行导出。