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

Question

背景

我或多或少一直在遵循官方指南来设置带有react的本地开发环境，并且似乎使用了create-react-app，这确实设置了很多东西。

现在，如果我运行，npm run build我会在build文件夹中得到所有内容的缩小版本。但是，如果我运行npm startNodeJS提供的版本，则似乎没有任何修改。但是我看不到这些文件。

题

所以：

• 我可以访问npm start某处生成的文件吗？由于这些似乎未修改。（build从未在那里修改）
• 还是可以以某种方式运行npm run build，以便使用未最小化的文件进行“开发”构建？

尝试

我的目的只是获得对React脚本的最小化版本的访问。

至于最后一个问题，我尝试了该问题中建议的一些参数和环境变量，但是如您所见，它失败了：

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

> example-project@0.1.0 build [...]
> react-scripts build

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

系统

我的package.json具有默认脚本：

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

---

注意：请不要问我为什么这样做，或尝试说服我这是不好的。我可能想要这样做的原因有很多，例如调试或此特定用例。

Answer 1

我想要 React 应用程序的未混淆代码 - 主要是出于好奇，我有源代码 - 同时负责用 Angular 重写它（生成一个更易于维护的应用程序，大小为 5%，依赖项为 1%）。

我从来没有使用过React，但是通过修改文件发现的

<base_path>/node_modules/react-scripts/config/webpack.config.prod.js

并用以下内容替换 module.exports 下的大型优化配置项...

module.exports = {...

    optimization: {
            minimize: false,
            splitChunks: {
                chunks: 'all',
                name: true
            },
            runtimeChunk: true
        },

npm run build构建了未混淆的、可读的代码，该代码按预期运行，不使用其他修改。仅将 Gitbash 与命令npm install、npm run build和npm start一起使用 - 只是认为有人可能会发现这很有用。

我不推荐这样做，因为你想要的代码仍然包裹在 webpack eval 的混乱中。从源代码中选择有用的部分或只是重建应用程序会更容易。充其量，我得看看什么是集群 React 和 Webpack。

Answer 2

要更改webpack配置和构建脚本，您必须从create-react-app中退出（我不建议您执行此步骤，因为这会破坏将来的兼容性），或者您可以使用诸如rewire之类的工具来覆盖某些设置

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

我个人只是用线

npm i rewire --save-dev

这是我过去为我的一个项目创建的示例配置，效果很好！

1. 创建一个build.js
2. 更改您的package.json，使其运行build.js

build.js

npm i rewire --save-dev

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

package.json

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 = '../';

因此，如果您真的想从create-react-app中弹出，则只需运行

npm run-script eject

然后您将获得一个包含create-react-app使用的所有配置的新文件夹

但是正如我之前说的，没有理由不使用rewire而是覆盖配置而不是弹出

如果有帮助，请不要忘记将其标记为答案