时间戳

首页 > 解决方案 > 如何在不缩小的情况下构建 React 的生产版本？

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

问题描述

背景

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

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

问题

所以要么：

尝试

我的目标只是获取最小化版本的 react scripts。

至于最后一个问题，我已经按照这个问题的建议尝试了一些参数和环境变量，但正如你所看到的，它失败了：

$ 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"
  },

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

标签： node.jsreactjsminifycreate-react-appreact-scripts

解决方案

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

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

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

如果有帮助，请不要忘记标记为答案 干杯和成功

推荐阅读