如何在不缩小的情况下构建React的生产版本? [英] How to build a production version of React without minification?

问题描述

我一直在或多或少地关注官方指南来设置使用react的本地开发环境，并且似乎使用了create-react-app，它确实设置了很多.

I've been following more or less the official guide to setup a local dev environment with react and it seems to use create-react-app, which sets up really a lot.

现在，如果我运行npm run build，则会在build文件夹中获得所有内容的简化版本. 但是，如果运行npm start，则NodeJS服务的版本似乎没有任何修改.但是我看不到这些文件.

Now, if I run npm run build I get a minified version of everything in the build folder. If I, however, run npm start the version NodeJS serves does not seem to have any modifications. But I cannot see these files.

所以:

• 我可以在某处访问由npm start生成的文件吗?由于这些似乎未修改. (build从未在那里修改过)
• 或者我可以以某种方式运行npm run build，以便使用未最小化的文件进行开发"构建吗?

• Can I access the files generated by npm start somewhere? As these seem to be unmodified. (build is never modified there)
• Or can I somehow run npm run build, so it does a "development" build with unminimized files?

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

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

As for the last question I've tried some parameters and enironmental variables as suggested in this question, but as you can see, it failed:

$ 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具有默认脚本:

System

My package.json has the default scripts:

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

---

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

---

Note: Please do not ask why I am doing it or try to convince me that it is bad. There are many reasons why I'd maybe want this, e.g. debugging or this specific use case.

推荐答案

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

To change the webpack config and build scripts you have either to eject from create-react-app (i would not recommend this step, as it breaks future compatibility) or you can use tools like rewire to override some settings

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

我个人只是重新接线

npm i rewire --save-dev

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

Here is a sample config i created for one of my projects in the past and it worked pretty good!

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脚本的节点版本)

Then in my package.json i changed the npm script links like this (node build which will run the build.js script)

package.json

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

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

So if you really want to eject from create-react-app, all you have to do is to run

npm run-script eject

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

Then you will get a new folder with all configs used by create-react-app

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

But as i said before, there is no reason why not to use rewire and just override the config instead of ejecting

如果有帮助，请不要忘记将其标记为答案 欢呼与成功

if it helps, please don't forget to mark as answer Cheers and good success

这篇关于如何在不缩小的情况下构建React的生产版本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！