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

Question

背景

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

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

问题

所以要么：

• 我可以从某处npm start生成的文件吗？ 因为这些似乎是未修改的。 （ build永远不会在那里修改）
• 或者我可以以某种方式运行npm run build ，以便它使用未最小化的文件进行“开发”构建吗？

尝试

我的目标只是获得未最小化版本的反应脚本。

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

$ 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

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

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

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

Answer 2

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

1. 使用npm run start启动你的npm run start应用npm run start
2. 打开浏览器访问http://localhost:3000
3. 打开开发人员工具并检查 webpack-dev 服务器创建的分块包。 在 Mac 上的 Chrome 中，您可以执行以下操作： cmd+option+j将打开开发人员工具。 然后单击源选项卡：在此选项卡中，您将看到由 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模块。

希望这有帮助！

Answer 3

我想要一个 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 4

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

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

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

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

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

1. main.chunk.js
2. 包.js
3. 供应商~main.chunk.js

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

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

Answer 5

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

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

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

Answer 6

在这个问题上花了一整天，我找不到办法得到生产代码的非缩小版本，

我所做的是：打开 chrome 上的开发工具，导航到源选项卡； 现在找到 javascript 文件（在 create-react-app 中它通常在 static > js > main.js 中）

当 javascript 文件可见时，在屏幕的左下角会出现一对大括号（看图片）：

开发工具的屏幕截图

当你点击花括号时，它美化了代码，然后你可以在代码中添加断点，处理那段代码并不方便，但现在这对我有用。

希望能帮助到你。