基于环境变量更新config.json的预构建脚本
我有一个角9应用程序，在这个应用程序中，我从一个资产文件夹读取api url：
@Injectable()
export class ConfigService {
private configUrl = '../../../assets/config/config.json';
constructor(private loggerService: LoggerService) { }
public async loadConfig(): Promise<any> {
try {
const response = await fetch(this.configUrl);
if (!response.ok) {
throw new Error(response.statusText);
}
return await response.json();
} catch (err) {
this.loggerService.error(`ConfigService 'loadConfig' threw an error on calling ${this.configUrl} : ${err.tostring()}`);
}
}
}在Configuring angular production files after build中描述了用于读取配置文件的方法。
environment.ts是
export const environment = {
production: false,
apiUrl: "https://localhost/api/",
};environment.prod.ts是
export const environment = {
production: true,
apiUrl: "https://server/api/",
};config.json是
{
"apiUrl": "http://someTestServer/api/"
}将不完全脚本复制apiUrl到config.json的脚本
var fs = require("fs");
fs.readFile(`./src/environments/environment.${process.env.CONFIG}.ts`, 'utf8', function (err, data) {
fs.writeFile('./src/assets/config/config.json', data, function (err) {
if (err) throw err;
console.log('complete');
});
});我的package.json脚本部分如下所示：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build-test": "CONFIG=test node update-config.js && npm run build",
"build-prod": "CONFIG=prod node update-config.js && npm run predeploy",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"predeploy": "ng build --prod",
"deploy": "node ftpdeploy.js"
}考虑到上面的情况:如何在构建之前根据不同的环境变量自动填充config.json文件的内容，这样我就不需要手动地复制和粘贴json文件到\dist文件夹了？
更新1:现在我可以将enviroment.xxx.ts的内容复制到config.json文件中。还有一个问题:当我从environment.xxx.ts复制内容时，它会将environment.xxx.ts的全部内容复制到config.json中(它还会复制environment.xxx.ts的导入部分)，然而，预期的结果是将environment (export const environment)读入对象中，并根据源environment对象更新config.json。我怎样才能做到这一点？
回答 2
Stack Overflow用户
发布于 2020-06-18 05:38:03
将预构建脚本更改为：
const fs = require("fs");
fs.readFile(`/src/environments/${process.env.CONFIG}.ts`, (err, content) => {
fs.writeFile("/src/assets/config/config.json", JSON.stringify(versionObject), () => { });
});然后从命令行(假设npm run build是要构建的命令，否则使用build命令更改它)：
$ CONFIG=environment npm run build应该解决你的问题。
编辑：
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
// add more lines as you need like this, one for each build environment
"build-test": "CONFIG=test node update-config.js && npm run build",
"build-prod": "CONFIG=prod node update-config.js && npm run predeply",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"predeploy": "ng build --prod",
"deploy": "node ftpdeploy.js"
},我在您的问题中注意到了一个\，可能您是在Windows下运行的，请确保使用一个bash：添加一个名为.npmrc的文件，其中只包含以下一行script-shell=bash
编辑：如果您想用fetch读取环境文件并使用await response.json()解析它，那么该文件应该是一个json文件，而不是ts文件：
{
production: true,
apiUrl: "https://server/api/",
}希望这能有所帮助。
Stack Overflow用户
发布于 2020-06-24 23:40:10
根据您在更新的帖子和评论中所指出的，您想要达到的目标是不可能的。
基本上，您希望将一个对象(environment)值复制到一个json文件中，但是这个对象会从其他人那里导入它的一些值。
所以你有这样的东西
somewhere.ts
export const constantValue = "myValue";environment.xx.ts
import {constantValue} from "./somewhere";
export const environment = {
production: false,
apiUrl: "https://localhost/api/",
otherValue: constantValue
};Problem：在构建之前，您无法访问constantValue的值，因此不能真正将其作为预构建脚本。
构建之后，environment对象将包含在main-es2015XXX.js中。但是，只有在otherValue配置中启用buildOptimizer时，才能解析angular.json的值，如下所示：
对于buildOptimizer : false，该值尚未解析，它将在运行时进行。因此，您不能使用这些值来编写json文件。environment变量将如下所示：
const environment = {
production: false,
apiUrl: "https://localhost/api/",
otherValue: _somewhere__WEBPACK_IMPORTED_MODULE_0__["constantValue"]
};使用buildOptimizer : true，可以在构建时解析常量的值。值将如下所示
const i={production:!1,apiUrl:"https://localhost/api/",otherValue:"myValue"}但是，mainXXX.js中的代码被缩小/丑陋了，我怀疑您是否能够解析/提取上面的配置值.
因此，要么删除所有导入(使用硬编码值)并使用Daniele Ricci的答案，要么手动创建json文件。
Note
我没有完全理解您这么做的原因，但我的感觉是，在您的代码中，您应该使用：
- 值来自
environment.ts，用于生成后不更改的值，如在生成
后可更改的值，则为config.json值。
https://stackoverflow.com/questions/62398794
复制
![[Go]解决goland terminal 环境变量不更新](https://ask.qcloudimg.com/http-save/yehe-2504969/9vzn4pe6dd.png)
相似问题
预生成脚本路径和预构建脚本参数
预蜂窝渲染脚本的构建
如何基于环境构建预渲染页面
Powershell预构建脚本从msbuild失败
Microsoft TFS构建过程，如何运行多个脚本作为预构建脚本。
领取专属 10元无门槛券
AI混元助手 在线答疑
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
