Angular构建后如何通过解析HTML修改script标签内变量并生成新文件

推荐使用Node生态的cheerio库完成需求，它是轻量的jQuery风格HTML解析工具，不会受HTML格式排版变化影响匹配结果，实现步骤如下：

步骤1：安装依赖 #

在项目根目录执行命令：

npm install cheerio --save-dev

步骤2：编写构建后处理脚本 #

在项目根目录新建post-build.js文件，代码如下：

const fs = require('fs');
const path = require('path');
const cheerio = require('cheerio');

// 配置路径，根据你的Angular构建输出目录调整
const DIST_PATH = path.join(__dirname, 'dist', '你的项目名');
const INDEX_HTML_PATH = path.join(DIST_PATH, 'index.html');
const PUBLIC_HTML_PATH = path.join(DIST_PATH, 'public.html');

// 读取构建后的index.html
const htmlContent = fs.readFileSync(INDEX_HTML_PATH, 'utf-8');
const $ = cheerio.load(htmlContent);

// 定位到包含__VIEW__变量的script标签
const targetScript = $('script').filter((i, el) => {
  return $(el).html().includes('window.__VIEW__');
});

// 替换变量值
const scriptContent = targetScript.html().replace(/window.__VIEW__\s*=\s*['"]INTERNAL['"]/, "window.__VIEW__ = 'PUBLIC'");
targetScript.html(scriptContent);

// 写入新的public.html文件
fs.writeFileSync(PUBLIC_HTML_PATH, $.html());

注意替换代码里的你的项目名为你实际Angular项目的输出目录名

步骤3：配置自动执行 #

修改package.json中的build命令，让脚本在构建完成后自动执行：

{
  "scripts": {
    "build": "ng build && node post-build.js"
  }
}

之后每次执行npm run build，就会自动在构建输出目录生成修改好变量的public.html文件。

方案优势 #

相比正则字符串替换，DOM解析方案的容错性更高：即使后续你的index.html里的script标签加了空行、空格、调整了其他代码，只要window.__VIEW__的声明还在script标签内，就可以正常匹配修改，不会出现正则匹配失效的问题。

内容的提问来源于stack exchange，提问作者Suresh Nagar