Angular 2/Webpack 环境配置

Question

我希望配置我的Webpack构建，使得我可以在我的Angular 2组件中声明import { environment } from './environments/environment'，并且在开发期间加载environment.ts，但是在生产环境中加载environment.prod.ts。我该如何告诉Webpack在构建过程中替换导入的内容？

我正在寻找类似于使用Angular CLI创建项目处理环境配置的方式。不幸的是，我不想使用CLI，因为它仍处于测试阶段，而且我还没有理解该项目的工作原理以及如何扩展其构建流程。

我还想避免在源代码中散布条件语句，因此不能在每个想要导入环境文件的地方使用process.env.NODE_ENV。

- Dustin Cleveland

---

抱歉，我错了，我没有注意到你没有使用Angular CLI... 你可以通过在构建时使用 ng build --env=prod 告诉webpack使用 environment.prod.ts。 - AngularChef

Answer 1

好的，我最终想出了一种方法来做这件事。首先是环境文件：

environment.interface.ts：

export interface Environment {
    apiRoot: string,
    target: string
}

environment.dev.ts：

import { Environment } from './environment.interface';

export const environment: Environment = {
    target: 'dev',
    apiRoot: 'http://www.dev.api.com'
}

环境.prod.ts：

import { Environment } from './environment.interface';

export const environment: Environment = {
    target: 'prod',
    apiRoot: 'http://www.api.com'
}

环境.ts：

export { environment } from './environment.dev';

然后，像平常一样将其导入到 Angular 组件中：

import { environment } from './environments/environment';

最后，在 webpack 配置中使用 NormalModuleReplacementPlugin：

webpack.prod.js：

module.exports = webpackMerge(commonConfig, {
  ...
  plugins: [
    ...
    new webpack.NormalModuleReplacementPlugin(/\.\/environment\.dev/, './environment.prod')
  ]
});

NormalModuleReplacementPlugin中的第一个参数是一个正则表达式，用于匹配environment.ts文件中的environment.dev。第二个参数是您想在构建中使用的配置模块。

我相信通过使用一些环境变量，这可以更加优雅地完成，但这是一个很好的起点。

- Dustin Cleveland

---

你是如何在构建命令中传递环境变量的？像这样：--env=prod - Jordan McDonald

我相信我是在使用Webpack的--config选项从package.json中："build": "rimraf dist && webpack --env.APP_TARGET prod --config config/webpack.prod.js --progress --profile""build:dev": "rimraf dist && webpack --config config/webpack.dev.js --progress --profile" - Dustin Cleveland