Webpack 和環境變量評估？

Question

我正在使用 webpack 捆綁我的前端應用程序並從 heroku 加載環境變量。

環境變量在 function 內部使用時可以解析，但在外部評估並分配給 const 時則不能：

import...

   /*This line will fail with : 'VM286683:1 Uncaught SyntaxError: Unexpected token u in JSON at position 
    0 at JSON.parse (<anonymous>)'*/
const geoApiSecretKey = JSON.parse(process.env.GEO_API_SECRET!);


function getGpsPosition() {

  //That one will parse the JSON without any issue
  const local_geoApiSecretKey = JSON.parse(process.env.GEO_API_SECRET!);
  ...
}

我的 webpack 配置使用DefinePlugin加載環境變量：

...
plugins: [
        new CheckerPlugin(),
        new HtmlWebpackPlugin({template: 'index.html.ejs',}),
        new webpack.DefinePlugin({
            'process.env': {
                'GEO_API_SECRET': JSON.stringify(process.env.GEO_API_SECRET)
            }
        })
    ],

我猜它與 webpack 和 heroku 無關。 我只是錯過了一些我在這里找不到的東西。 謝謝您的幫助。

Answer 1

變量在另一個文件中被覆蓋，從而改變了它的性質