如何在 webpack 編譯期間禁止替換 process.env 變量？

Question

故事

我正在開發 AWS Lambda 函數並使用webpack編譯代碼。

我讀過一些文章，似乎process.env變量在編譯process.env被自動替換。 雖然很酷，但我想禁止這種行為。

為什么？

因為我使用 AWS Lambda 儀表板傳遞環境變量。

網絡包配置

const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  target: 'node',
  entry: path.resolve(__dirname, 'index.ts'),
  externals: [nodeExternals()],
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{
        loader: 'ts-loader',
        options: {
          experimentalWatchApi: true,
        },
      }],
    }]
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, 'dist')
  }
}

題

是否可以禁止在webpack編譯期間替換process.env變量的行為？ 如果是，請幫我實現這個效果。

Answer 1

故事

我正在開發 AWS Lambda 函數並使用webpack編譯代碼。

我讀過一些文章，似乎process.env變量在編譯process.env被自動替換。 雖然很酷，但我想禁止這種行為。

為什么？

因為我使用 AWS Lambda 儀表板傳遞環境變量。

網絡包配置

const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  target: 'node',
  entry: path.resolve(__dirname, 'index.ts'),
  externals: [nodeExternals()],
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{
        loader: 'ts-loader',
        options: {
          experimentalWatchApi: true,
        },
      }],
    }]
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, 'dist')
  }
}

問題

是否可以禁止在webpack編譯期間替換process.env變量的行為？ 如果是，請幫我實現這個效果。

Answer 2

故事

我正在開發 AWS Lambda 函數並使用webpack編譯代碼。

我讀過一些文章，似乎process.env變量在編譯process.env被自動替換。 雖然很酷，但我想禁止這種行為。

為什么？

因為我使用 AWS Lambda 儀表板傳遞環境變量。

網絡包配置

const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  target: 'node',
  entry: path.resolve(__dirname, 'index.ts'),
  externals: [nodeExternals()],
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{
        loader: 'ts-loader',
        options: {
          experimentalWatchApi: true,
        },
      }],
    }]
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, 'dist')
  }
}

問題

是否可以禁止在webpack編譯期間替換process.env變量的行為？ 如果是，請幫我實現這個效果。

Answer 3

故事

我正在開發 AWS Lambda 函數並使用webpack編譯代碼。

我讀過一些文章，似乎process.env變量在編譯process.env被自動替換。 雖然很酷，但我想禁止這種行為。

為什么？

因為我使用 AWS Lambda 儀表板傳遞環境變量。

網絡包配置

const nodeExternals = require('webpack-node-externals')
const webpack = require('webpack')
const path = require('path')

module.exports = {
  target: 'node',
  entry: path.resolve(__dirname, 'index.ts'),
  externals: [nodeExternals()],
  devtool: 'inline-source-map',
  mode: 'production',
  module: {
    rules: [{
      test: /\.tsx?$/,
      use: [{
        loader: 'ts-loader',
        options: {
          experimentalWatchApi: true,
        },
      }],
    }]
  },
  plugins: [],
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'index.js',
    libraryTarget: 'commonjs',
    path: path.resolve(__dirname, 'dist')
  }
}

問題

是否可以禁止在webpack編譯期間替換process.env變量的行為？ 如果是，請幫我實現這個效果。

Answer 4

雖然將optimization.nodeEnv設置為false對NODE_ENV變量有效，但它不適用於所有環境變量，並且不會阻止process.env在編譯代碼中被替換。

我在后端使用 Webpack，因此在運行時訪問很重要。

由於在編譯后的代碼中似乎沒有保留process.env的官方方法，因此我找到了這個對我有用的解決方法。

我必須定義一個新的全局變量，我稱之為ENVIRONMENT ，它將在編譯期間被process.env替換。

new webpack.DefinePlugin({
  ENVIRONMENT: 'process.env',
}),

在我的代碼中，我會像訪問普通對象一樣訪問它：

ENVIRONMENT.DATABASE_URL

以上編譯為process.env.DATABASE_URL 。