javascript - 运行时Angular 2 Webpack环境配置

Question

我正在使用 Webpack 构建我的 Angular 项目。

我有一个 env.js 文件，如下所示:

module.exports.ENV = {
  API_URL: "http://localhost:5001/",
  ...
};

在我的 webpack.common.js 中，我有:

const API_URL = require('./env').ENV.API_URL;
const METADATA = {
  API_URL: API_URL,
  title: "Angular Project",
  ...
};

这很好，因为我能够在单个 env.js 文件中配置我的环境变量。但是，此配置在构建过程中。这很糟糕，因为我不能只构建一次并在每个环境中运行(假设环境有一个 env.js)，相反，对于每个环境，我必须构建一个新的项目实例 - 这我认为这不是最佳做法。

所以我的问题是:有什么方法可以在运行时使用 Angular 2 和 Webpack 配置我的环境变量？

Answer 1

Webpack 推荐使用 process.env.NODE_ENV:

https://webpack.js.org/guides/environment-variables/

我在很多地方用过这个:

const ENV = process.env.ENV = process.env.NODE_ENV = 'development';

还有一个库包cross-env，可以在命令行调用它来设置环境变量，同时执行一个进程。

你也可以从你的 webpack 插件中定义你的环境变量(通过 DefinePlugin):

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),