前言
在开发前端项目时，使用npm包已经成为了一个非常方便和标准的方式。一些实用的npm包，比如webpack、React等，已经成为前端开发推广中的标配。
然而，当我们需要在多个项目中使用同样的模块时，npm包的引入仍然需要考虑重复的安装和更新，这时候会显得比较麻烦。因此，如何减少依赖的安装和管理成为了热点。npm 包 standalone-module 就是为了解决这个问题而生的。
standalone-module 是什么
standalone-module 是一个可以通过 script 标签来引入的 npm 包。他把 npm 包内的模块转换为了一个具有全局访问能力的对象，类似于 jQuery 或 Lodash 等全局可用的 npm 包，可以在浏览器中直接使用，将这个连接在你的 HTML 页面上，无需任何构建工具或打包过程，就可以像使用标准 JavaScript 库一样使用它。
基本使用
安装
npm install standalone-module -g
打包
在需要打包的模块中使用 standalone-module 命令：
standalone-module -i input -o output
其中，input 是您的 npm 包入口文件（通常是 index.js）的路径，output 是生成 JavaScript 文件的路径（包括文件名）。
例如：
standalone-module -i ./node_modules/axios/index.js -o ./axiosGlobal.js
该命令将 npm 包 axios 打包并存储至 axiosGlobal.js 文件中，以便后续使用。
引入
将打包后的 JavaScript 文件引入到 HTML 页面中：
<script src="./axiosGlobal.js"></script>
在引入文件后，在全局作用域中就会存在一个名为 axios 的全局变量，您可以像下面这样使用：
axios.get('http://www.example.com/api')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});高级用法
基本参数
standalone-module 可以使用一些选项来生成您需要的输出。常见的选项如下：
--name <name>，设置生成的全局变量的名称--no-minify，关闭生成的输出的压缩--sourcemaps，生成源映射--umd，生成与 UMD 模块兼容的输出--strict，生成 "use strict" 指令
例如，以下命令为 lodash 打包生成全局变量 "myLo"：
standalone-module -i ./node_modules/lodash/index.js -o ./myLo.js --name myLo
添加依赖
如果您的模块依赖于其他模块，standalone-module 还提供了选项来添加它们。在这里，您也可以将自己的文件或文件路径添加到生成的文件中：
standalone-module \ -i ./node_modules/myModule/index.js \ --name myModule \ --alias react=React \ --alias redux=Redux \ -o ./myModule.js \ --include-files file1.js path/to/file2.js
在这个例子中，我们以 myModule 为名称，将模块解析为根文件，将打包后的文件存储为 myModule.js。我们还将 react 和 redux 设置为全局变量 (alias)，并添加了 file1.js 和 path/to/file2.js 文件。
添加外部依赖
如果您的模块依赖于外部文件，可以使用 standaloneModule.registerExternalDependency() API 将其添加到生成的文件中。
例如，在以下代码中，我们使用该 API 将 jQuery 添加到依赖项中：
-- -------------------- ---- ------- --------- -------- -------- - ------ ------- --- -------- -- ------ ------ --- ----------- - -------------- - ---------------------------- -------------- - ------ ------ --- ---------- -- ---------- - ------------------- ---------- -------- - ---------------- - ------------------------ ---------------- ------- --------- ---------- -- - ---- -------- -- ------ ---- -----
使用示例
下面是一个完整的使用 axios 和 jQuery 的示例：
standalone-module --name myModule --alias jquery=jQuery -i ./node_modules/myModule/index.js -o dist/myModule.js --include-files jquery-3.4.1.min.js
extern \'jQuery\';
registerExternalDependency('jquery-3.4.1.min.js', 'jQuery');
module.exports = window.myModule;在页面中引入：
<script src="./jquery-3.4.1.min.js"></script> <script src="./myModule.js"></script> myModule.doSomething();
结论
standalone-module 提供了一种简单的方法，使我们能够快速在浏览器中使用 npm 包的模块。但是，只有在必须要这样做时才应该使用它，如在有限的环境中开发、测试或构建专用库时。对于大多数项目，使用构建工具（如 Webpack）来处理您的依赖项更安全、更可维护、更高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005642581e8991b448e1531