reactjs - 如何在 create-react-app 中注入(inject)没有 REACT_APP 前缀的 dotenv 变量？

Question

我有一个项目要从旧版 React 应用迁移到标准 create-react-app一个(未弹出)。

在遗留项目中，它手动加载 .env带有 dotenv 的文件和 dotenv-expand并通过 webpack DefinePlugin 注入(inject).
create-react-app直观支持dotenv但只能识别 REACT_APP_ 的变量字首。

遗留代码中有很多地方以及使用 process.env.xxx 的其他存储库中的导入包。变量，所以现在不可能在迁移之前用前缀重命名它们。

在这种情况下，我该如何制作 create-react-app识别没有 REACT_APP_ 的 dotenv 变量字首？

顺便说一句，我试过 rewire在 webpack 上通过一些简单的自定义构建脚本，例如捆绑 js 和 css:

const path = require('path');
const rewire = require('rewire');
const defaults = rewire('react-scripts/scripts/build.js');

let webpackConfig = defaults.__get__('config');

webpackConfig.output.filename = 'static/js/[name].js';
webpackConfig.optimization.splitChunks = { cacheGroups: { default: false } };
webpackConfig.optimization.runtimeChunk = false;
webpackConfig.plugins.find(plugin => plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.filename = 'static/css/[name].css';
webpackConfig.plugins.find(plugin => plugin.__proto__.constructor.name === 'MiniCssExtractPlugin').options.moduleFilename = () => 'static/css/[name].css';

不过好像 dotenv和 DefinePlugin更复杂。不确定是否可以以相同的方式实现。

Answer 1

也可以使用 rewire

// "start": "node start.js"
const rewire = require('rewire');

process.env.NODE_ENV = 'development';

let getClientEnvironment = rewire('react-scripts/config/env.js');
getClientEnvironment.__set__(
  'REACT_APP',
  /(^REACT_APP_|API|DEPLOY|SECRET|TOKEN|URL)/,
);

let configFactory = rewire('react-scripts/config/webpack.config.js');
configFactory.__set__('getClientEnvironment', getClientEnvironment);

let start = rewire('react-scripts/scripts/start.js');
start.__set__('configFactory', configFactory);

build有点不同

// "build": "node build.js"
const rewire = require('rewire');

process.env.NODE_ENV = 'production';

let getClientEnvironment = rewire('react-scripts/config/env.js');
getClientEnvironment.__set__(
  'REACT_APP',
  /(^REACT_APP_|API|DEPLOY|SECRET|TOKEN|URL)/,
);

let configFactory = rewire('react-scripts/config/webpack.config.js');
configFactory.__set__('getClientEnvironment', getClientEnvironment);

let webpackConfig = configFactory('production');

let build = rewire('react-scripts/scripts/build.js');
build.__set__('config', webpackConfig);