使用 Angular 为 NativeScript 设置不同环境变量的最佳方法是啥？

Posted 2023-04-13

【中文标题】使用 Angular 为 NativeScript 设置不同环境变量的最佳方法是啥？

【英文标题】：What is the best ways to set up different environment variables for NativeScript with Angular?使用 Angular 为 NativeScript 设置不同环境变量的最佳方法是什么？

【发布时间】：2018-12-29 05:16:21

【问题描述】：

在 Angular 中，将环境变量加载到应用程序中的实际方法是使用 environment.ts，它是 cli 的一部分。

在 NativeScript 中，这似乎不适用于 NativeScript cli。

最好的方法是什么？

【参考方案1】：

2018 年 8 月 25 日更新

如果您将 webpack 与 NativeScript 一起使用，您可以将环境变量传递到 webpack 中，然后您可以从您的代码中访问这些变量。当你第一次安装 NativeScript webpack 时，它会在你的 package.json 所在的同一文件夹中生成一个 webpack.config.js。在代码编辑器中打开 webpack.config.js 并搜索 new webpack.DefinePlugin 并修改它像这样：

        new webpack.DefinePlugin(
            "global.TNS_WEBPACK": "true",
            'process.env': 
                'envtype': JSON.stringify(env && env.envtype ? env.envtype : ""),
                'gmapsKey': JSON.stringify(env && env.gmapsKey ? env.gmapsKey : ""),
                'stripeKey': JSON.stringify(env && env.stripeKey ? env.stripeKey : ""),
                // etc, these are just examples
            
        ),

然后，在构建期间注入您的环境变量：

// for example
tns run android --bundle --env.envtype="dev" --env.gmapsKey="KEY_HERE" --env.stripeKey="KEY_HERE"

然后，您可以像这样在代码中访问您的环境变量：

使用角度

您可以创建一个 Angular 服务并在您想要的任何组件中访问注入的变量。

import  Injectable  from '@angular/core';

declare var process: any;

@Injectable()
export class EnvironmentManagerService 
    private getEnvironmentVars(key: string): string 
        if (typeof process !== 'undefined' && process && process.env) 
            return process.env[key];
         else 
            return "";
        
    

    public getGoogleMapsKey(): string 
        return this.getEnvironmentVars("gmapsKey");
    

    public getStripePublishableKey(): string 
        return this.getEnvironmentVars("stripeKey");
    

    public isDev(): boolean 
        return this.getEnvironmentVars("envtype") === "dev";
    

没有角度

在您的应用文件夹下的项目中创建一个新文件。您可以随意调用该文件。添加以下内容：

declare var process: any;

export function getEnvironmentVars(key: string): string 
    if (typeof process !== 'undefined' && process && process.env) 
        return process.env[key];
     else 
        return "";
    

您可以使用import * as env from '<file path here>' 从任何地方导入该文件并调用env.getEnvironmentVars(...)，例如env.getEnvironmentVars("gmapsKey").

---

可能还有一些方法可以通过有条件地修改 webpack 包含的文件来模拟相同的 environment.ts 和 environment.prod.ts 方法，但我没有探索这种方法，因为上述方法足以满足我的目的。

如果你不使用 webpack，你可以使用 custom hooks 方法，虽然我从未使用过。

【讨论】：

谢谢，我会试试这个并报告。我的团队说之前设置/学习 Webpack 很痛苦。从您的回复看来，这并没有那么大的努力。

这肯定取决于您正在处理的代码库 - 有时很容易，有时您会在谷歌上搜索为什么启用捆绑后代码无法编译。

是否可以从 build.xconfig 而不是 CLI 参数中获取这些变量值？

我不明白为什么不这样做。在定义插件之前，您可以阅读您的 xconfig 文件——它只是 Nodejs。那里可能也有一个 npm 模块。

【参考方案2】：

webpack.config.js文件中默认设置如下：

new webpack.DefinePlugin(
    'global.TNS_WEBPACK': 'true',
    TNS_ENV: JSON.stringify(mode),
    process: 'global.process'
),

mode 变量取自 webpack.config.js 文件中的以下代码：

const mode = production ? 'production' : 'development';

要在 webpack.config.js 中设置 production 变量，您必须在构建/运行时设置 --release 标志。 https://docs.nativescript.org/tooling/docs-cli/project/testing/run.html 状态：

--release - 如果设置，则通过在生产模式下运行 webpack 和在发布模式下运行原生构建来生成发布版本。否则，产生 调试版本。

这意味着在本地测试“生产模式”而不构建发布.apk文件，你必须按照arao6所说的。