Question

我想将环境变量存储在webpack.config.js中，当我将应用程序与Nativepack中的webpack捆绑在一起时将设置该变量。目标是即使在捆绑销售之后也要保持环境变量的机密性。

我该怎么做？

我相信这应该可行，如此处https://docs.nativescript.org/performance-optimizations/bundling-with-webpack所述（但不详细介绍）。

但是我无法在测试中使用它。我是webpack的新手，所以我可能缺少明显的东西。

为简单起见，我将调用变量“ simple_env_variable”，并为其赋予值“ here_is_the_value！”。

要访问此变量，我以为可以用以下方式调用它：

$ tns build ios --bundle --env.development --env.simple_env_variable=here_is_the_value!

我要在webpack.config.js中输入什么代码，然后在ts组件中输入什么代码来访问它？

例如：

webpack.config.js：

module.exports = env => {
...
  const config = {
  ...
   plugins: [
   ...
     new webpack.DefinePlugin({
      "simple_env_variable": /**What Do I Enter Here***/

cool-component.ts：

export class CoolComponent {

public myVariable = /**What Do I enter here to access the variable in webpack.config.js? **/

Answer 1

您可以直接在代码中访问键值对，但是如果您使用TypeScript，则应将其强制转换为任意值（因为TS需要对所有变量进行强类型输入）。

例如

webpack.config.js

new webpack.DefinePlugin({
                "global.TNS_WEBPACK": "true",
                "process": undefined,
                "myGlobal.MyScarySecret": JSON.stringify("my big old secret")
            }),

，然后在捆绑的应用程序中

main-page.ts

declare let myGlobal: any;

export function navigatingTo(args: EventData) {
    let page = <Page>args.object;

    console.log(myGlobal.MyScarySecret); // my big old secret
}

Answer 2

以Nick Lliev的回答为出发点，从here的讨论中，以下内容在升级Webpack和nativescript设置后对我有用：

webpack.config.js：

new webpack.DefinePlugin({
        "global.TNS_WEBPACK": "true",
        "process": undefined,
        "myGlobal.MySecret": JSON.stringify(env.first_property)
}),

main-page.ts：

import {OnInit...

declare let myGlobal: any

@Component...

export class MainPageComponent implements OnInit {
...

ngOnInit(): void {
  console.log(myGlobal.MySecret) // prints "yaySecret" with the run command I have below
}

然后运行tns运行命令：

$ tns run ios --bundle --env.uglify --env.aot --env.first_property="yaySecret"

如何在nativescript中访问webpack环境变量？

2 个答案: