什么是 不确定的动态依赖
-
如下代码中
a.js一定会被 webpack 解析加载，webpack 会读取文件内容(而不是执行代码)，根据内容来判断是否需要加载依赖，最后打包结果中出现了a.js；if (Math.random() < 0.5) { const a = require("./utils/a.js"); console.log(a); } -
如果改成加载模块需要用户手动输入，这样 webpack 并不知道加载 utils 下具体哪一个依赖，webpack 会把 utils 下的所有依赖都加载，最后打包结果中出现了 utils 下所有的模块；
const module = document.getElementById("txt").value; if (Math.random() < 0.5) { const a = require("./utils/" + module); // 动态依赖 console.log(a); }
加载动态依赖的原理
const a = require("./utils/" + module)等价与const context = require.context(./utils)context.keys() 为 utils 下所有的模块的 路径数组
require.context 方法仅在 webpack 运行过程中有效
// 仅在 webpack 运行过程中有效
// 参数1：目录，哪个目录中的模块需要添加到打包结果
// 参数2：是否递归寻找子目录，如果为 true，表示需要寻找子目录
// 参数3：正则表达式，凡是匹配的才会加入到打包结果
const context = require.context("./utils", true, /\.js$/);
console.log(context.keys()); // [ './a.js', './b.js', './c.js', './d.js', './index.js' ]
应用场景
导出 utils 下所有的模块，提供一个 index.js 为所有模块导出，方便使用， 手动导出会有代码耦合，新增模块还需要手动导出；
这时可以利用
require.context("./utils", true, /\.js$/)动态导出；
// index.js 导出当前目录中所有的模块
const context = require.context("./", true, /\.js$/);
for (const key of context.keys()) {
if (key !== "./index.js") {
let filename = key.substr(2);
filename = filename.substr(0, filename.length - 3);
exports[filename] = context(key);
}
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
node👉 全局对象
上一篇
评论
