在基于特定环境的构建期间替换配置文件中的端点值？答案

【问题标题】：Replace endpoint values in config file during build based on specific environment?在基于特定环境的构建期间替换配置文件中的端点值？
【发布时间】：2017-11-10 14:02:18
【问题描述】：

我在 Angular 2/4/5 应用程序上工作了一段时间（这就是为什么 2/4/5），使用 webpack 捆绑所有内容等。应用程序本身与用 C# 编写的后端 API 通信.我们现在处于需要支持 4 个不同的环境的阶段，这会导致提到的后端 API 有 4 个不同的端点，所以我开始探索如何在npm run build:environment 期间结合 VSTS 替换端点的值在运行特定脚本时也应该进行转换的构建定义。

这是配置文件的样子：

const AppConfig = {     
    hubName: "eventhub",
    baseApiUrl: "https://endpoint.com/api/",
    baseUrl: "https://endpoint.com/"
};

我从webpack.prod.js 和webpack.dev.js 开始，配置了两个脚本：build:prod 和build:dev。这两个webpack 文件都将process.env.ENV 的值分别设置为production 和development。使用该信息，我尝试在config.ts 文件中读取process.env.ENV 的值，然后只执行switch/case 并根据该值设置baseApiUrl 和baseUrl 的值，但是没有用，它保持一直默认回到development，所以我放弃了这种方法并开始探索其他选项，比如使用normalModuleReplacementPlugin 代替webpack，但收效甚微。

有没有更好的方法在构建任务执行期间替换配置文件的特定属性？

【问题讨论】：

我认为this SO 帖子将帮助您满足您的需求并让您走上正轨
谢谢！这篇文章为我提供了宝贵的见解，但建议的答案对我来说实际上是一个完美的解决方案。
我想知道，这怎么没有得到更多的关注，还有 Angular 团队还没有解决这个问题？

标签： angular npm webpack azure-devops azure-pipelines

【解决方案1】：

你可以使用 webpack DefinePlugin 做得更好，因为它会用你在 webpack 配置文件中指定的值替换你 typescript 代码中的变量。

PS：但在我的情况下，我没有指定确切的值 - 相反，我从 webpack 配置中的 process.env 读取值，所以我只需要一个配置：

plugins: [
    new webpack.DefinePlugin({
        ENV: JSON.stringify(process.env.ENV)
    })
]

【讨论】：