前言
在开发前端项目时，我们经常需要使用像 jQuery、Bootstrap 等这样的第三方库，来方便我们的开发。而对于前端的模块化开发，我们通常使用的是 CommonJS 或 AMD 规范。这也催生了很多前端模块化打包工具，比如一些流行的打包工具 Webpack、Rollup 等。
而在这个过程中，我们经常会遇到一些问题，比如在打包时，同名模块需要分别打包，但是多个模块都用到了相同的依赖包，如果不做特殊处理，可能会出现一些奇怪的问题。
这就是今天我们要介绍的一个 npm 包 @modulr/shadow 所解决的问题。
什么是 @modulr/shadow？
@modulr/shadow 是一个 Node.js 模块加载器，可以解决模块之间的依赖问题。它的核心特点是：
- 能够将多个同名模块打包到同一个文件中；
- 能够消除模块之间的依赖，即依赖只需要在第一次使用时加载一次；
- 能够提高项目的加载速度和运行效率。
@modulr/shadow 的使用
@modulr/shadow 使用起来很简单，只需要在你的项目中安装该 npm 包：
npm i @modulr/shadow --save-dev
然后，在你项目中的 index.js 文件中，加入如下代码：
const shadow = require('@modulr/shadow');
shadow({
src: './src',
expose: {
'jquery': 'jquery'
}
});这里的 src 表示你项目中的源代码目录，expose 则表示你需要暴露出去的全局变量，比如这里的 jquery 就将会被挂在在全局变量 window 下。
当你在其他模块中使用 jquery 时，你只需要像这样：
const $ = require('jquery');接下来，就可以愉快的使用 jquery 了！
示例代码
下面是一个简单的项目，其中我们使用了 jquery 和 lodash 这两个依赖包：
index.js 文件：
-- -------------------- ---- -------
----- ------ - --------------------------
--------
---- --------
------- -
--------- ---------
--------- ---
-
---
----- - - ------------------
----- - - ------------------
-----------------------
-------------------- ----src/index.js 文件：
const $ = require('jquery');
console.log('Hello shadow!');看到这里，@modulr/shadow 的使用应该已经不会有太多问题了。希望@modulr/shadow 能帮助大家规避前端模块化打包过程中出现的种种问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b1081e8991b448d8ba8