在实际开发中，开发者可能遇到其他类型的模块，比如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其实就是根据当前全局对象的值判断目前处于哪种模块环境，就选择适合模块环境的导出方式进行导出。
加载npm模块
与Java、C++、Python等语言相比，JavaScript是一种缺乏标准库的语言。当开发者需要解决URL处理、日期解析这类很常见的问题时，很多时候只能自己动手封装工具接口。而npm提供了这样一种方式，可以让开发者在其平台上找到由他人所开发和发布的库并安装到项目中，从而快速地解决问题。
那么如何在本地工程中加载一个外部的npm模块呢？以实际开发中最常见的lodash库为例。
- 首先通过命令将lodash库安装到本地工程中：
npm install lodash -save - 然后在全局作用域（一般是工程入口文件）引入lodash库即可：
import _ from "lodash"
提示
因为lodash是工具库，在工程运行时也需用到其提供的方法，所以要将lodash库安装到运行依赖中。
示例代码仓库
https://gitee.com/zero_79152105/webpack-vblog
原创文章，作者：ZERO，如若转载，请注明出处：https://www.edu24.cn/course/webpack-load-other-modlue.html
微信扫一扫 
支付宝扫一扫 
