Question

我正在尝试使用dotenv模块和NODE_ENV值有选择地设置环境变量。

我使用以下env.js文件来设置我的自定义环境变量：

const NODE_ENV = process.env.NODE_ENV
require('dotenv').config()

switch (NODE_ENV) {
  case 'development':
    process.env.REACT_API_URL = process.env.DEV_API_URL
    process.env.REACT_BUILD_PATH = process.env.DEV_BUILD_PATH
    process.env.REACT_BUILD_MODE = 'development'
    break
  case 'production':
    process.env.REACT_API_URL = process.env.PROD_API_URL
    process.env.REACT_BUILD_PATH = process.env.PROD_BUILD_PATH
    process.env.REACT_BUILD_MODE = 'production'
    break
  default:
    throw new Error('NODE_ENV is not a valid value: should be \'development\' or \'production\' ')
    break
}

const REACT = /^REACT_/i
const raw = Object.keys(process.env)
  .filter(key => REACT.test(key))
  .reduce(
    (env, key) => {
      env[key] = process.env[key]
      return env
    },
    {

    }
  )
const stringified = {
  'process.env': Object.keys(raw).reduce((env, key) => {
    env[key] = JSON.stringify(raw[key])
    return env
  }, {})
}

module.exports = { raw, stringified }

我从CRA的脚本中复制并修改了其中的一些。因此，使用此代码并提供.env文件，如果我像运行NODE_ENV=development node那样运行节点REPL并对该文件运行require('./env')，我将得到如下结果：

// .env
DEV_API_URL=http://localhost:4000
DEV_BUILD_PATH=../../ssr/build

{ raw:
   { REACT_API_URL: 'http://localhost:4000',
     REACT_BUILD_PATH: '../../ssr/build',
     REACT_BUILD_MODE: 'development' },
  stringified:
   { 'process.env':
      { REACT_API_URL: '"http://localhost:4000"',
        REACT_BUILD_PATH: '"../../ssr/build"',
        REACT_BUILD_MODE: '"development"' } } }

有了这个，我期望从env.js看到相同的结果，以便在用Webpack构建React包时可以使用它。但是结果却不像我想的那样。 webpack.config.js文件（基本版本）如下所示：

const path = require('path')
const webpack = require('webpack')

const env = require('./env')

module.exports = {
  entry: ["core-js/stable", "regenerator-runtime/runtime", "./src/index.jsx"],
  output: {

  // ...
  plugins: [
    new webpack.DefinePlugin(env.stringified)
  ]
}

在上面的代码中，我导入了env.js对象以将其用作自定义process.env。但是在process.env内部，情况却与我想要的不一样：

// if I do `console.log(env)`:
{ raw:
   { REACT_API_URL: 'undefined',
     REACT_BUILD_PATH: 'undefined',
     REACT_BUILD_MODE: 'development' },
  stringified:
   { 'process.env':
      { REACT_API_URL: '"undefined"',
        REACT_BUILD_PATH: '"undefined"',
        REACT_BUILD_MODE: '"development"' } } }

问题是require('dotenv').config()中的env.js根本没有被调用，因此使用process.env进行初始化的任何变量都没有任何值。这是适当的行动吗？如果我想实现自己的目标该怎么办？

当webpack构建时，`require（'dotenv'）。config（）`不起作用

0 个答案: