Webpack Served Angular 2 App 的基于环境的属性？答案

【问题标题】：Environment-based properties for Angular 2 App Served by Webpack?Webpack Served Angular 2 App 的基于环境的属性？
【发布时间】：2018-06-02 13:32:50
【问题描述】：

我正在使用由 JHipster 生成并由 Spring Boot 服务器提供服务的独立 Angular 控制台。我希望根据环境（本地、开发、产品等）为应用提供具有不同属性的应用。

I see a lot of posts about configuring the webpack build per-environment，但我需要将 URL 和其他数据直接指定到我的 Angular 2 4.x 应用程序中 - 无论我是在开发人员还是在生产环境中运行应用程序，这些数据都会发生变化。当我们通过 webpack 启动 Angular 时，这种类型的每个环境配置是否可行？

【问题讨论】：

标签： angular webpack jhipster

【解决方案1】：

我推荐dotenv-webpack 插件。

webpack.config.js

const  Dotenv  =  require('dotenv-webpack');
...
plugins: [
   new  Dotenv({
      path:  './.env'
   })
]

.env

URL=http://example.com
ENV=PROD
...

这允许您使用process.env 访问环境变量：

constructor(private http:HttpClient) {
     http.get(`${process.env.URL}`).subscribe(t=> {
        ...
     });
}

在构建时替换环境变量。

【讨论】：

【解决方案2】：

我最终没有安装 DotEnv 插件，而是实现了 webpack 页面上列出的 DefinePlugin 解决方案。因为我是一个菜鸟——我发现文档令人困惑，并且列出的示例不起作用，因为它没有使用“process.env”变量（这对我来说是一个新概念）。

这是我用来设置此系统的粗略分步指南：

为您要支持的每个环境创建一个 webpack.envName.js 文件。
除了任何构建设置之外，在每个将使用自定义属性的文件中创建DefinePlugin 条目。在我最初的测试中，在我的 webpack.common 中创建一个“全局”常量会覆盖其他环境，所以我避免在那里设置参数。
在“process.env”键下创建DefinePlugin 常量。这是一个特殊的键，基于 js 的系统用于存储特定进程的数据。
修改您的 yarn、node、mvn 等构建以利用您的本地开发环境（如果尚未发生）。在我的情况下，我们的开发环境在云端，所以我创建了一个默认的local 环境来进行本地化测试。
1. 现在可以在各自的环境中访问已定义的常量，而无需任何导入类型语句。

这是一个示例 sn-p。 plugins 条目下的我的 webpack.local.js 文件：

...
new webpack.DefinePlugin({
'process.env': {
    NAME: JSON.stringify('local'),
    API_URL: JSON.stringify('http://localhost:8000/'),
}
})
...

假设我想在我的fakeService typescript 类中访问这些值：

~/src/main/webapp/fake-service.ts
@Injectable
export class FakeService {
    private URL_ROOT = process.env.API_URL + 'api/v2/externalService/resource/';
    constructor(private http: HTTP) {}
    get(): Observable<any> {
        if(process.env.NAME == 'local') {
            console.log("Calling url at " + this.URL_ROOT);
        }
       return this.http.get(this.URL_ROOT).map((res: Response) => res.json());
    }
}

可能有更好的方法来做到这一点（或者将来会有）。与其将这个 process.env 依赖项构建到您的应用程序中，不如创建一个 Configuration 服务来加载这些值并可以注入到需要使用这些数据的服务或组件中。

【讨论】：