在nativescript&中传递依赖于环境的变量angular2

时间:2016-10-19 10:58:09

标签: nativescript angular2-nativescript

我正在使用NativeScript(2.3.0)和Angular2(2.0.0)

构建移动应用程序

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

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

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

1 个答案:

答案 0 :(得分:2)

经过一些研究后,我得到了一个解决方案,并将其发布以供将来参考:

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

所有关于在全局命名空间中发布变量并使用Webpack通过new webpack.DefinePluginhttps://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;
}

完成!

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