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

1 回答

• 2

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

  灵感来自这个文档：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;
  }
  

  完成！

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

  回复于 2024-04-29T07:28:20+08:00