如何在create-react-app中注入没有REACT_APP前缀的dotenv变量? [英] How to inject dotenv variables without REACT_APP prefix in create-react-app?

问题描述

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

I have a project to migrate from legacy React app to standard create-react-app one (not ejected).

在旧项目中，它会使用 dotenv 和 dotenv-expand 手动加载 .env 文件，并通过Webpack DefinePlugin 注入

In legacy project, it manually loads .env files with dotenv and dotenv-expand and injects through webpack DefinePlugin.

create-react-app 直观地支持 dotenv ，但只能识别带有 REACT_APP _ 前缀的变量.

create-react-app intuitively supports dotenv but can only recognize variables with REACT_APP_ prefix.

遗留代码中还有很多地方，以及其他存储库中使用 process.env.xxx 变量的导入程序包，因此现在无法在迁移之前使用前缀重命名它们.

There are so many places in legacy code also along with imported packages in other repositories that are using process.env.xxx variables, so it is impossible for now to rename them with prefix before migration.

在这种情况下，如何使 create-react-app 识别没有 REACT_APP _ 前缀的dotenv变量?

In this case, how can I make create-react-app recognize dotenv variables without REACT_APP_ prefix?

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

BTW, I tried to rewire build script before with some simple customizations over webpack, like bundling js and 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 似乎更复杂.不确定是否可以通过相同的方式实现.

But it seems dotenv and DefinePlugin are more complicated. Not sure if it can be achieved in the same way.

推荐答案

也使用 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);

这篇关于如何在create-react-app中注入没有REACT_APP前缀的dotenv变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！