如何批量引用脚本

背景

使用 h5 开发大型应用程序时，必然会遇到页面需要加载大量脚本的需求。这些脚本通常可以按特定单位，如：局部模块，划分成多组。从解耦的角度上，我们可能需要在页面上声明模块引用，然后交由工具自动引入模块的内部脚本。形如下图所示：

.jsref 文件是自定义的，代表脚本引用集合的 html 文件

实现

借助 node.js，上述诉求并不难实现：

1. 确定 jsref 文件的引用语法，例如：<link rel = "import" href = "filepath">
2. 扫描 html 正文，根据语法确定 jsref 文件
3. 解析 jsref 文件，使用文件正文替换 html 中的 jsref 声明字符串
4. 使用处理后的 html 正文生成构建后的 html 文件

这样的确能实现我们的主要目的，但关联的，还有开发便利性上的诉求：

1. html 文件使用相对路径引用 jsref 文件
2. jsref 文件使用相对路径引用模块内的 js 文件
3. 可以在 jsref 文件中嵌套引用 jsref 文件

这就需要构建环节进行额外的处理动作：

引入文件正文时，动态调整正文中脚本的引用路径，使其最终以相对于 html 文件的方式被引用

不仅脚本的 script 标签有此类需求，img，video，audio，link, source 等标签也同样需要支持引用路径的动态调整。

插件

对于上述诉求，gulp-resolve-import 插件都能够很好地满足，甚至支持开发者有条件地执行引入动作。
有兴趣的同学可以试一试。