[JavaScript知识库]react-app-rewired和customize-cra支持webpack.DefinePlugin（将配置变量赋值给process.env）的两种方式

webpack支持将环境变量放在process.env中，然后在打包时执行变量替换生成最终代码，注意：这些变量不会注入浏览器中，因此无法在页面上通过js访问。

修改项目中的配置文件 config-override.js

方法一

// config-override.js

const webpack = require('webpack')

/**
 * @param {object} config
 * @param {any[]} config.plugins
 */
function rewireDefinePlugin(config, env, definePluginOptions = {}) {
  // Add the define plugin to the list of plugins
  config.plugins = (config.plugins || [])
    .concat([new webpack.DefinePlugin(definePluginOptions)])

  return config
}

module.exports = function override(config, env) {
  //do stuff with the webpack config...
  config = rewireDefinePlugin(config, env, {
    "process.env.VERSION": JSON.stringify(333)
  });
  return config
}

方法二

// config-override.js

const webpack = require('webpack')

const {
  override,
  addWebpackPlugin,
} = require('customize-cra')

module.exports = override(
  addWebpackPlugin(
    new webpack.DefinePlugin({
      "process.env.VERSION": JSON.stringify(333)
    })
  )
)

注意：虽然333经过JSON.stringify的序列化，但在使用时依然是number类型

关于process.env的一些知识：

process.env最早出现在NodeJS中，项目用来进行环境识别，但这些都是运行在本机桌面端环境（包括GUI、控制台和守护进程），然后Webpack将process.env引入到浏览器端作为全局变量（注意，变量名称不是process，而是修改了名称），页面中process.env里面的属性就那么少量的几个，在React项目中，可以添加以REACT_APP_开头命名的自定义属性名，其他格式不行。