Angular自定义文件变更检测：实现.md文件自动转HTML热更新

方案一：并行脚本+文件监听（简单易维护） #

• 安装依赖：

  npm install concurrently chokidar-cli --save-dev
  

• 修改package.json的脚本配置：

  "scripts": {
    "start": "concurrently \"ng serve\" \"npm run watch:md\"",
    "watch:md": "chokidar \"./help/**/*.md\" -c \"node ./transformMarkdown.js\"",
    "prestart": "node ./transformMarkdown.js",
    "prebuild": "node ./transformMarkdown.js"
  }
  

• 运行npm start后，chokidar会持续监听/help目录下所有.md文件的变更，一旦文件修改就自动执行转换脚本生成.html；同时ng serve正常监听Angular项目文件，会在.html更新后自动刷新页面。

方案二：修改Angular CLI配置（整合到官方构建流程） #

• 编辑angular.json，在对应项目的architect.serve.options中添加额外监听路径：

  "projects": {
    "你的项目名": {
      "architect": {
        "serve": {
          "options": {
            "additionalWatchPaths": ["./help/**/*.md"]
          }
        }
      }
    }
  }
  

• 项目根目录创建webpack.config.js，添加文件变更钩子触发转换脚本：

  module.exports = {
    plugins: [
      {
        apply: (compiler) => {
          compiler.hooks.watchRun.tap('MarkdownTransformPlugin', (compiler) => {
            const changedFiles = Object.keys(compiler.watchFileSystem.watcher.mtimes);
            const hasMdChanges = changedFiles.some(file => file.endsWith('.md'));
            if (hasMdChanges) {
              const { execSync } = require('child_process');
              execSync('node ./transformMarkdown.js');
            }
          });
        }
      }
    ]
  };
  

• 在angular.json的architect.build.options中引入自定义webpack配置：

  "build": {
    "options": {
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      }
    }
  }
  

• 运行ng serve时，Angular CLI会监听.md文件变化，触发脚本重新生成.html。

注意事项 #

• 确保transformMarkdown.js能正确处理所有目标.md文件，生成的.html文件路径与Angular组件的引用路径一致。
• 方案一无需修改Webpack配置，上手成本更低，适合多数场景。

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