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

Question

背景

我多多少少关注过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，所以它使用未最小化的文件进行 "development" 构建吗？

尝试

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

至于最后一道题我已经试过了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"
  },

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

Answer 1

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

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

我个人用的只是rewire

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 而只是覆盖配置而不是弹出。

Answer 2

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

使用 npm run start
打开浏览器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 并返回到你的初始配置。这也将允许您在 'semi-safe' 沙盒环境中进行自定义。请记住，create-react-app 并没有提供任何魔法，它只是为您的构建配置设置 有用的默认值。

最后，正如@xzessstence 指出的，您可以试用 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 运行 build 构建了未混淆的、可读的代码运行正如预期的那样，没有使用其他修改。仅将 Gitbash 与命令 npm install、npm 运行 build 和 npm start -只是觉得有人可能会觉得有用。

我不推荐这个，因为你想要的代码仍然包裹在一个 webpack eval 的混乱中。从源代码中挑选有用的部分或重新构建应用程序会更容易。充其量，我看到了什么是集群反应和 webpack。

Answer 4

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

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

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

Answer 5

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

中所述

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

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

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

但你真正需要的只是 index.html（通常只是一个加载 JS 文件的存根）和后面的 3 个 JS 文件，它们在所有 create-react-app 上似乎都是一致的分期付款，以及它们各自的源映射文件。

main.chunk.js
bundle.js
供应商~main.chunk.js

您可以直接右键单击页面上的 link 并保存它们，或者您可以直接导航 link 或从 Chrome Dev Tools“源中获取它们" 选项卡。

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

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

How to build a production version of React without minification?

node.js

reactjs

minify

create-react-app

react-scripts

背景

问题

尝试

系统