如何在不缩小的情况下构建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

要更改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

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脚本的节点构建）

package.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使用的所有配置的新文件夹

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

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