将外部JavaScript文件嵌入HTML的构建方案需求与实现

开发项目中需要生成独立的.html文件，开发阶段用独立JavaScript文件保证便利性与模块化，构建时要把相关JS直接以嵌入<script>标签（无src属性）的方式整合进目标.html文件，同时需支持：

• 适配多JS依赖，所有依赖合并后嵌入单个<script>标签
• 可通过main.js引入所有依赖再打包，流程流畅

示例 #

输入文件 #

input.html

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<script id="custom" src="test.js"></script>
</body>
</html>

test.js

alert("hello");

输出文件（output.html） #

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<script id="custom">
alert("hello");    
</script>
</body>
</html>

方案尝试与最终解决办法 #

试过的不合适方案 #

• Webpack：即使设置iife: false，仍会残留不必要的包装代码，不符合需求
• Grunt：处理时会移除<script>标签的id属性，无法满足要求

最终可行方案：m4预处理器 #

m4预处理器可以完美满足需求，实现简单且不会破坏标签属性、无多余代码。

使用流程

1. 创建预处理模板文件input.html.preprocessed：

<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
</head>
<body>
<script id="custom">
  changequote(, )
  include(test.js)
</script>
</body>
</html>

• changequote(, )：修改m4的引用符号，避免和JS代码中的引号冲突
• include(test.js)：直接将指定JS文件的内容嵌入到当前位置；如果是多依赖，可先在main.js里引入所有依赖，再用include(main.js)即可实现合并嵌入

2. 执行构建命令生成目标文件：

m4 input.html.preprocessed > output.html

如果需要原HTML文件在开发阶段仍可正常运行，可配合sed预处理后再执行m4，本场景无需此功能。

内容的提问来源于stack exchange，提问作者Uri Barenholz