如何将导入的JSON数据嵌入发布的Angular库构建包以消除依赖？

以下是几种可行的实现方式，都能让你在构建阶段把私有JSON数据嵌入库中，消除对私有npm源和VPN的依赖：

方法1：预构建脚本拉取+本地引用 #

通过脚本在构建前将私有JSON下载到本地，修改代码引用本地文件，让Angular构建时自动打包进去。

1. 编写数据拉取脚本
   在项目根目录创建scripts/fetch-private-data.js：

   const fs = require('fs');
   const axios = require('axios');
   
   // 私有npm源的JSON文件地址
   const privateJsonUrl = 'https://your-private-registry.com/@your-scope/your-data-package/data.json';
   
   async function fetchData() {
     try {
       // 带身份验证请求私有源（账号密码用环境变量传入）
       const response = await axios.get(privateJsonUrl, {
         auth: {
           username: process.env.NPM_USER,
           password: process.env.NPM_PWD
         }
       });
       // 将数据写入库的src目录
       fs.writeFileSync('./projects/your-lib/src/assets/private-data.json', JSON.stringify(response.data, null, 2));
       console.log('私有数据已下载到本地');
     } catch (err) {
       console.error('数据拉取失败:', err.message);
       process.exit(1);
     }
   }
   
   fetchData();
   

2. 配置预构建命令
   修改package.json的scripts，让构建前自动执行脚本：

   "scripts": {
     "prebuild:lib": "node scripts/fetch-private-data.js",
     "build:lib": "ng build your-lib"
   }
   

3. 修改代码引用
   把原来指向私有npm包的导入，改成引用本地文件：

   // 原代码：import privateData from '@your-scope/your-data-package/data.json';
   import privateData from './assets/private-data.json';
   

4. 确保资源被打包
   在angular.json的库构建配置中，确认assets包含该文件：

   "projects": {
     "your-lib": {
       "architect": {
         "build": {
           "options": {
             "assets": ["src/assets/private-data.json"]
           }
         }
       }
     }
   }
   

   同时确保tsconfig.lib.json中开启resolveJsonModule: true，允许导入JSON文件。

方法2：Webpack自定义配置内联数据 #

通过自定义Webpack配置，在构建阶段直接拉取数据并注入到代码中，无需本地文件。

1. 创建Webpack配置文件
   在库目录下创建webpack.config.js：

   const axios = require('axios');
   const webpack = require('webpack');
   
   module.exports = async (config) => {
     // 拉取私有JSON数据
     const privateJsonUrl = 'https://your-private-registry.com/@your-scope/your-data-package/data.json';
     const response = await axios.get(privateJsonUrl, {
       auth: {
         username: process.env.NPM_USER,
         password: process.env.NPM_PWD
       }
     });
   
     // 用DefinePlugin把数据注入为全局常量
     config.plugins.push(
       new webpack.DefinePlugin({
         'PRIVATE_DATA': JSON.stringify(response.data)
       })
     );
   
     return config;
   };
   

2. 修改Angular构建配置
   在angular.json中切换到自定义Webpack构建器：

   "projects": {
     "your-lib": {
       "architect": {
         "build": {
           "builder": "@angular-builders/custom-webpack:browser",
           "options": {
             "customWebpackConfig": { "path": "./webpack.config.js" },
             // 原有其他配置...
           }
         }
       }
     }
   }
   

3. 在代码中使用全局常量

   const privateData = PRIVATE_DATA;
   // 后续业务逻辑不变
   

方法3：JSON转TypeScript常量 #

将下载的JSON数据转换为TypeScript常量文件，彻底消除JSON依赖，同时获得类型提示。

1. 修改拉取脚本生成TS文件
   修改scripts/fetch-private-data.js的写入逻辑：

   // 替换原写入JSON的代码
   fs.writeFileSync('./projects/your-lib/src/app/private-data.ts', 
     `export const privateData = ${JSON.stringify(response.data, null, 2)} as const;`
   );
   

2. 代码引用TS常量

   import { privateData } from './private-data';
   

关键注意事项 #

• 所有拉取操作必须在VPN环境下执行（比如CI/CD流水线中配置VPN访问），构建完成后的包不再依赖私有源和VPN。
• 私有npm的身份信息不要硬编码，用环境变量传递，避免泄露。
• 构建完成后检查产物包，确认没有残留对私有源的依赖引用。

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