Angular 2/Webpack 环境配置

Question

我想配置我的 Webpack 构建，以便我可以在我的 Angular 2 组件中声明 import { environment } from './environments/environment' 并导入加载 environment。 ts 在开发期间，但 environment.prod.ts 在生产中。我如何告诉 Webpack 在构建期间替换导入？

我正在寻找与使用 Angular CLI 创建项目的方式非常相似的东西正在处理环境配置。不幸的是，我宁愿不使用 CLI，因为它仍处于测试阶段，而且我还没有完全了解项目的工作方式以及如何扩展其构建管道。

我还想避免在我的源代码中分散条件语句，所以不要在我想要导入环境文件的任何地方的 if 语句中使用 process.env.NODE_ENV。

Answer 1

好吧，我终于想出了一个办法来做到这一点。一、环境文件:

环境.interface.ts:

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

环境.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 的正则表达式。第二个参数是您要在构建中使用的配置模块。

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