使用Webpack在TypeScript应用程序中设置环境配置

Question

我已经完成了几个解决方案，包括这里列出的解决方案：

• Environment Variables in an isomorphic JS app: Webpack find & replace?
• Passing environment-dependent variables in webpack

我习惯使用类似gulp-replace-task的内容来查找和更新应用的config文件，以便用环境中设置的内容替换@@SERVER_URL之类的内容。

这样我可以执行export SERVER_URL=something或使用SERVER_URL=something gulp build运行脚本来设置配置。

我尝试了以下所有方法：

使用transform-loader加envify

这是第一个问题的建议，但由于以下原因对我不起作用：

Module build failed: Error: Parse Error: Line 1: Illegal import declaration
at throwError (ngapp/node_modules/esprima-fb/esprima.js:2823:21)

似乎esprima-fb正在使用Webpack因某种原因无法使用的import声明。 The project也不再被维护，所以这可能是走错路。

使用DefinePlugin

我添加了：

module: {plugins: [new webpack.DefinePlugin({"process.env.SERVER_URL": "something"})]}

这似乎被忽略了，或者至少process.env.SERVER_URL没有在我的打字稿文件中进行插值。当我console.log(process.env)时，它会发出一个空对象。

使用--define为webpack设置

我更新了我的npm脚本：

"start": "webpack-dev-server --define process.env.SERVER_URL=${SERVER_URL}"

然而，这最终只会用文字process.env.SERVER_URL替换我的代码中的"${SERVER_URL}"，而不是在npm脚本中进行插值。

在使用Webpack构建的TypeScript应用程序中使用环境变量是否有简单/方便（或此时真正任何）的方式？

我的Webpack设置基本上是in the Angular docs列出的内容。