Question

我正在使用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。使用该信息，我尝试在process.env.ENV文件中阅读config.ts的值，然后执行switch/case并根据值设置baseApiUrl和baseUrl的值但是，这不起作用，它一直默认为development，所以我放弃了这种方法并开始探索其他选项，例如使用normalModuleReplacementPlugin webpack，但是收效甚微。

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

Answer 1

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

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

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

在构建期间根据特定环境替换配置文件中的端点值？

1 个答案: