Question

我正在使用NativeScript（2.3.0）和Angular2（2.0.0）

构建移动应用程序

我正在努力如何根据环境（dev / test / prod）将环境变量保存在源代码之外。

理想情况下，我希望拥有包含它们的专用文件（.env.dev .env.test .env.prod）但我对任何有效的解决方案持开放态度。

我既没有找到任何帮助，无论是Native Script docs还是google搜索。

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.js访问webpack对象的唯一方法）

通过以下方式修改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;
}

完成！

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

在nativescript＆amp;中传递依赖于环境的变量angular2

1 个答案: