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

Posted 2023-02-21

【中文标题】如何在不缩小的情况下构建 React 的生产版本？

【英文标题】：How to build a production version of React without minification?

【发布时间】：2019-08-05 12:31:24

【问题描述】：

背景

我或多或少一直在关注the official guide to setup a local dev environment with react，它似乎使用create-react-app，这确实设置了很多。

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

问题

所以要么：

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

尝试

我的目标只是访问最小化版本的 react 脚本。

至于最后一个问题我试过some parameters and enironmental variables as suggested in this question，但是如你所见，它失败了：

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

---

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

【问题讨论】：

顺便说一句，这似乎是一件非常困难的事情，我已经asked the create-react-app devs，这是否可以在他们的脚本中默认实现。

【参考方案1】：

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

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

我个人使用只是重新接线

npm i rewire --save-dev

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

创建一个 build.js 更改您的 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 并且只是覆盖配置而不是弹出

如果有帮助，请不要忘记标记为答案 干杯并取得好成绩

【讨论】：

这个信息让我走上了战争之路，谢谢。我切换到react-app-rewired。按照步骤 1-3 到config-overrides.js，并使用传播运算符修改默认 webpack 配置。

我使用上面的脚本加上：config.optimization.minimize = false;

在我的例子中，minifier 是索引 4.. 而不是使用 config.plugsin[5]，你最好使用类似：const minifier = config.plugins.find((plugin) => plugin.constructor.name === "MiniCssExtractPlugin"); 以避免在创建反应应用程序构建脚本被更改时出错。

^ 当我这样做时返回 null - 你确定你的名字是对的，@uɥƃnɐʌuop 吗？ const minifier = config.plugins.find((plugin) => plugin.constructor.name === "MiniCssExtractPlugin");

@dylanh724，不，我不确定它通常是什么，我只知道当我离开评论时它正在工作。它可能是特定于配置的，或者从那时起可能已经改变。我记得我注销了每个插件的 constructor.name 以获得MiniCssExtractPlugin

【参考方案2】：

为什么看不到源文件？这是我会尝试的：

使用npm run start 启动您的 React 应用程序 打开浏览器到http://localhost:3000 打开开发者工具并检查由 webpack-dev 服务器创建的分块包。在 Mac 上的 Chrome 中，您可以执行以下操作：cmd+option+j 将打开开发者工具。然后点击 sources 选项卡：在此选项卡中，您将看到由 react 的构建配置创建的包。现在，这些包的输出可能并不漂亮，但都在那里。

或者，即使您使用create-react-app，您的所有应用程序的构建配置设置都包含在您的webpack.config.js 文件中。因为这个配置只是封装在react-scripts 节点模块中。所以也许你可以尝试直接编辑这个文件，而不弹出：<base_path>/node_modules/react-scripts/config/webpack.config.js。尽管您需要小心不要破坏现有的配置设置。您可能想弄乱生产构建的source-map 设置。至少这样，如果你破坏了这个文件，你总是可以删除并重新安装react-scripts，然后回到你的初始配置。这也将允许您在“半安全”沙盒环境中进行自定义。请记住，create-react-app 并没有提供任何魔法，它只是为您的构建配置提供了有用的默认值。

最后，正如@xzesstence 指出的，您可以试用react-app-rewired 模块。

希望对您有所帮助！

【讨论】：

虽然您提出的所有建议在技术上都是可行的，但它似乎是一个很大的解决方法，当我更新 npm 模块时可能会中断。而且实际上并没有按照设计/预期的方式使用工具（npm 等）。通过浏览器导出也很丑陋，例如想要一个目录中的所有文件，但在浏览器中我只能打开单个文件，并且可以手动复制/粘贴它们，但是不......这永远不适合开发人员的工作流程。 （尤其是因为我需要经常这样做！）

那么您应该尝试重新布线的方式，这不是解决方法，它不会破坏任何东西..您实际上只需添加一个 build.js 就像我发布的那样，然后根据需要修改配置..您可以不受任何限制地更新依赖项，并且永远不会丢失配置。首先我和你一样想，为什么这么复杂，但它真的很简单，而且他们添加默认配置作为依赖项是有逻辑的原因的。总的来说，我真的可以推荐它一个很好的解决方案。我在一个巨大的生产环境中使用了几次，试一试，看看你得到了什么

不确定我是否同意，但我也认为这是每个开发人员的个人偏好。没有导出到您只是使用开发人员工具的浏览器，就像它们用于第一个选项的方式一样。这是开发人员工具的重点，因为它是每个前端开发人员日常的一部分，开发工具是一个很棒的工具集。第二个选项是修改 webpack.config.js 中的构建配置以获取推荐的构建目录文件。尽管您可以肯定地破坏一个模块，但它只是一个简单的安装即可恢复正常

这还取决于您希望如何使用 create-react-app，因为它旨在提供适合大多数用例但不适合个人定制的良好默认值。 create-react-app 背后没有什么神奇之处，它只是为构建配置提供了一个有用的项目结构和良好的默认值。它有点混淆了这个好/坏的细节，但如果你不使用 create-react-app 你将不得不设置这些细节。至于库选项，我明白你的意思，我个人并不反对它，因为我喜欢进行精细控制并提供我自己的构建配置

但是使用该库为新团队成员的学习增加了一层额外的复杂性，因此您必须权衡它与仅仅拥有一个工作配置。但最终这是个人喜好，只要一切正常，就没有错误的选择:)

【参考方案3】：

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

我没用过 React 是通过修改文件发现的

/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 构建了未混淆、可读的代码，可以按预期运行，无需进行其他修改。仅使用命令 npm install、npm run build 和 npm start 使用 Gitbash - 只是觉得有人可能会觉得这很有用。

我不建议这样做，因为您想要的代码仍然包装在 webpack eval 混乱中。从源代码中挑选有用的部分或重新构建应用程序更容易。充其量，我得看看集群反应和 webpack 是什么。

【讨论】：

我正在运行 VS2019，上面的内容对我不起作用。没有 webpack.config.prod.js 文件只有 webpack.config.js。我确实在 webpack.config.js 中找到了“优化”键并将其替换为上面的，但它仍然发布了缩小的输出。无论如何谢谢！

使用那个仍然对我有用。也许存储配置文件，如果它构建，则有多个配置。另外，我只使用 gitbash npm 命令构建。

感谢您挖掘这个！荒谬的是图书馆不会让你轻松地覆盖它

【参考方案4】：

我知道现在回答这个问题为时已晚，但试试这个npm i -D cra-build-watch。

我觉得这个库被低估了，但它只是观察 react 应用程序的变化，不会一次又一次地重新构建整个包。

尽管重新布线有助于通过不缩小构建来帮助构建，但是它仍然会一次又一次地经历构建的整个过程。

【参考方案5】：

文件保存在服务器进程内存中，不写入磁盘，除非您弹出脚本（或者如果可以使用“rewire”之类的工具）并修改它们以使用 @987654322 将其写入磁盘@ 选项，如the webpack DevServer docs 中所述。

但是，您可以通过导航到服务器下的 webpack-dev-server 端点来获取实际的文件列表/链接。

例如，如果在 localhost:3000 使用默认 url，则使用以下 url 来查看服务器上的所有文件：

http://localhost:3000/webpack-dev-server

但您真正需要的只是 index.html（通常只是一个加载 JS 文件的存根）和以下 3 个 JS 文件，它们在所有 create-react-app 安装中似乎都是一致的，以及它们各自的源映射文件。

main.chunk.js bundle.js vendors~main.chunk.js

您可以直接右键单击页面上的链接并保存它们，或者您可以直接导航链接或从 Chrome 开发工具的“来源”选项卡中获取它们。

请注意，对于代码更改，通常只更新 main.chunk.js 文件，因此对于一般的代码更改，您可能只获取更新后的 main.chunk.js 和 main.chunk.js.map 文件。