Angular实验性browser-esbuild能否像Webpack那样引入原始文件？

要实现类似Webpack里raw-loader加载原始文件内容的效果，有两种实用方案：

方案一：使用导入断言（Import Assertions） #

这是最简单的方式，无需额外插件，利用esbuild原生支持的导入断言特性：

1. 确保目标文件在Angular的asset配置中（如果文件不在默认assets目录，需要添加）：
   在angular.json的assets数组里添加匹配规则，比如要加载所有.html文件：

   "assets": [
     "src/favicon.ico",
     "src/assets",
     {
       "glob": "**/*.html",
       "input": "src",
       "output": "/",
       "allowOutDir": true
     }
   ]
   

2. 在代码中用导入断言导入文件：

   import yourFileContent from './yourfile.html' assert { type: 'raw' };
   

   这样yourFileContent就是文件的原始文本内容。

方案二：自定义esbuild插件 #

如果需要更灵活的处理逻辑（比如修改内容后再导出），可以自定义esbuild插件：

1. 在项目根目录创建插件文件，比如raw-loader-plugin.js：

   module.exports = {
     name: 'raw-loader-plugin',
     setup(build) {
       // 匹配你需要处理的文件后缀，可根据需求调整
       build.onLoad({ filter: /\.(html|txt|md)$/ }, async (args) => {
         const fs = require('fs');
         // 读取文件原始内容
         const rawContent = fs.readFileSync(args.path, 'utf8');
         // 这里可以添加自定义处理逻辑，比如替换文本、去除空格等
         // 把内容包装成ES模块导出
         return {
           contents: `export default ${JSON.stringify(rawContent)}`,
           loader: 'js',
         };
       });
     },
   };
   

2. 在angular.json中配置构建器的esbuild选项，引入这个插件：

   "architect": {
     "build": {
       "builder": "@angular-devkit/build-angular:browser-esbuild",
       "options": {
         // 其他现有配置...
         "esbuildOptions": {
           "plugins": ["./raw-loader-plugin.js"]
         }
       }
     }
   }
   

3. 直接在代码中导入文件即可：

   import yourFileContent from './yourfile.html';
   

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