本文介绍如何使用 npm 包 local-include-js，它是一个用于在 HTML 中引入本地 js 文件的工具，非常方便地解决了 HTML 中引入多个 js 文件时的繁琐问题。
安装
首先请安装 npm 包 local-include-js：
npm install local-include-js
然后在 HTML 文件中引入：
<script src="node_modules/local-include-js/dist/local-include-js.min.js"></script>
使用
基本用法
使用 local-include-js 的最简单方法是，声明一个 class 为 "local-include-js" 的 <script> 标签，然后在这个标签的 data-src 属性中指定引入的本地 js 文件路径：
<script class="local-include-js" data-src="/path/to/your/js/file.js"></script>
如果有多个文件需要引入，直接重复使用这段 HTML 代码即可。
多种方式引入
除了上面的基本用法之外，local-include-js 还支持多种引入方式。
data-src 和 data-main
data-src 属性用于指定要引入的 js 文件路径，而 data-main 属性则用于指定这个 js 文件的入口函数。这个入口函数可以是一个字符串，也可以是一个对象。如果是一个字符串，就表示这个字符串对应的全局函数是入口函数；如果是一个对象，就可以包含多个函数，其中 init 函数是入口函数。定义入口函数有利于模块化开发。
<script class="local-include-js" data-src="/path/to/your/js/file.js" data-main="init"></script>
data-deps
data-deps 属性用于指定依赖的 js 文件路径，可以是一个数组，也可以是一个字符串。如果是一个数组，就表示这个数组中的所有 js 文件都是当前 js 文件的依赖；如果是一个字符串，那么就只有这个字符串表示的 js 文件是依赖。
<script class="local-include-js" data-src="/path/to/your/js/file.js" data-deps="['/path/to/dependency/file1.js', '/path/to/dependency/file2.js']"></script>
data-sync
默认情况下，local-include-js 引入的 js 文件是异步加载的，也就是说，在 js 文件加载完成之前，HTML 页面可能已经开始渲染了。如果希望在 js 文件加载完成之后才执行渲染操作，可以设置 data-sync 属性为 true。
<script class="local-include-js" data-src="/path/to/your/js/file.js" data-sync="true"></script>
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----------------------- ------------ ------- ------ -------------------- --------- ---- ------------------ ------- ------------------------ ------------------------------ ------- -------
//test.js
function init() {
var outputElement = document.getElementById("output");
outputElement.innerHTML = "Hello, World!";
}总结
本文介绍了如何使用 npm 包 local-include-js 来方便地在 HTML 中引入本地 js 文件。除了基本用法之外，还讲解了多种引入方式和属性的用法。
使用 local-include-js 可以大大简化前端代码开发中的繁琐操作，同时也能提高代码的可控性和重用性。如果你还没有使用过 local-include-js，不妨试一试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be381e8991b448d98c6