如何在不缩小的情况下构建 React 的生产版本？

背景

我或多或少都在关注使用 React 设置本地开发环境的官方指南 https://reactjs.org/tutorial/tutorial.html#setup-option-2-local-development-environment它似乎使用create-react-app，这确实设置了很多。

现在，如果我跑npm run build我得到了所有内容的缩小版本build文件夹。 然而，如果我跑npm startNodeJS 提供的版本似乎没有任何修改。但我看不到这些文件。

Question

所以要么：

• 我可以访问由npm start某处？因为这些似乎没有经过修改。 （build那里从未被修改过）
• 或者我可以以某种方式运行npm run build，那么它会使用未最小化的文件进行“开发”构建吗？

Tries

我的目标只是访问未最小化版本的反应脚本.

至于我尝试过的最后一个问题这个问题中建议的一些参数和环境变量 https://stackoverflow.com/questions/55092940/npm-run-build-always-builds-production-and-never-development，但正如你所看到的，它失败了：

$ NODE_ENV=dev npm run build --dev --configuration=dev

> [email protected] /cdn-cgi/l/email-protection build [...]
> react-scripts build

Creating an optimized production build...
[...]

System

My package.json有默认脚本：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Note:请不要问我为什么这样做或试图说服我这样做是不好的。我想要这个的原因有很多，例如调试或这个特定的用例 https://stackoverflow.com/questions/55160698/how-to-use-react-without-unsafe-inline-javascript-css-code.

要更改 webpack 配置和构建脚本，您必须从 create-react-app 中弹出（我不推荐此步骤，因为它会破坏未来的兼容性）或使用 rewire 等工具来覆盖某些设置

看看这个。
https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired

我个人使用的是重新布线

npm i rewire --save-dev

这是我过去为我的一个项目创建的示例配置，它运行得非常好！

1. Create build.js
2. 更改你的 package.json 以便它运行 build.js

build.js

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

// Consolidate chunk files instead
config.optimization.splitChunks = {
  cacheGroups: {
    default: false,
  },
};
// Move runtime into bundle instead of separate file
config.optimization.runtimeChunk = false;

// JS
config.output.filename = '[name].js';
// CSS. "5" is MiniCssPlugin
config.plugins[5].options.filename = '[name].css';
config.plugins[5].options.publicPath = '../';

然后在我的 package.json 中我像这样更改了 npm 脚本链接 （将运行 build.js 脚本的节点构建）

包.json

"scripts": {
    "start": "react-scripts start",
    "build": "node build && gulp",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

所以如果你真的想从 create-react-app 中弹出，你所要做的就是运行

npm run-script eject

然后你将得到一个新文件夹，其中包含 create-react-app 使用的所有配置

但正如我之前所说，没有理由不使用重新接线并覆盖配置而不是弹出。