nativescript - 在 NativeScript 和 Angular2 中传递环境相关变量

Question

我正在使用 NativeScript (2.3.0) 和 Angular2 (2.0.0) 构建移动应用程序

我正在努力如何根据环境(开发/测试/产品)加载环境变量，从而将环境变量保留在我们的源代码之外。

理想情况下，我希望有专门的文件来保存它们(.env.dev .env.test .env.prod)，但我对任何可行的解决方案持开放态度。

无论是 Native Script 文档还是谷歌搜索，我都找不到任何帮助。

Answer 1

经过一番研究，我得到了一个解决方案，并将其发布以供将来引用:

受到此文档的启发:https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-pass-environment-variables%3F

这一切都是关于在全局命名空间中发布变量并使用 Webpack 通过 new webpack.DefinePlugin 覆盖它们 ( https://webpack.github.io/docs/list-of-plugins.html#dependency-injection )。

分步指南:

• 将 Webpack 安装为 NS 模块:tns install webpack(更多信息 https://docs.nativescript.org/tooling/bundling-with-webpack )

• 将 Webpack 安装为 node_module: npm install --save-dev webpack (我知道这似乎多余，但这是我发现从 webpack.config 访问 webpack 对象的唯一方法.js)

• 在webpack.config.js中修改如下:(其他不相关的配置已省略)

  var bundler = require("nativescript-dev-webpack");
  var webpack = require("webpack");
  
  module.exports = bundler.getConfig({
  
    plugins: [
      new webpack.DefinePlugin({
        'ENV': JSON.stringify('dev'),
        'API_URL': JSON.stringify('my_api_url'),
        'HMR': 'whatever',
      })
    ]
  });
  

在 /app 文件夹中创建以下文件，旨在使用全局变量填充全局命名空间(正如所说，它们将被 Webpack 覆盖)

global-environment.ts

// Extra variables that live on Global that will be replaced by webpack DefinePlugin
declare var ENV: string;
declare var HMR: boolean;
declare var API_URL: string;

interface GlobalEnvironment {
    ENV;
    HMR;
    API_URL;
}

完成!

也许你对此有更好的方法/改进。我很高兴听到他们的声音。