39

背景

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

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

问题

所以要么：

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

尝试

我的目标只是获取最小化版本的 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"
  },

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

4

5 回答 5

20

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

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

于 2019-03-14T14:51:56.120 回答
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构建了未混淆、可读的代码，可以按预期运行，不使用其他修改。仅使用命令npm install，npm run build和npm start使用 Gitbash - 只是认为有人可能会发现这很有用。

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

于 2020-10-14T20:50:19.410 回答
3

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

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

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

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

希望这会有所帮助！

于 2019-03-14T15:14:53.263 回答
1

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

但是，您可以通过导航到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 文件。

于 2021-06-09T00:04:16.757 回答
0

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

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

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

于 2021-01-23T11:53:06.487 回答