依赖项更改时重新编译create-react-app的智能方法 [英] Smart way to recompile create-react-app when a dependency changes

问题描述

我正在将create-react-app与我开发的程序包（我的程序包）一起使用。
My-package与webpack捆绑在一起。

I’m using create-react-app with inside a package (my-package) that i developed. My-package is bundled with webpack.

在繁重的测试循环中，我经常更改my-package，并在react-app中本地重新安装使用 npm i-保存../ my-package 时，不幸的是，此操作速度很慢，并且当我在<$ c中时不会触发react-app的重新编译操作$ c> npm start 模式。

During heavy duty test loops i often change my-package and i re-install it locally in the react-app with npm i —save ../my-package, unfortunately this operation is slow and does not trigger a recompile action by the react-app when i’m in npm start mode.

如果我可以将 webpack设置为手表 放在my-package中，并且捆绑包以某种方式提供给react-app +重新编译触发器。

It would be nice if i could set webpack —watch in my-package and somehow have the bundle served to the react-app + a recompile trigger.

有没有办法实现这一目标？
谢谢。

Is there a way to achieve this? Thanks.

推荐答案

我将答案分为两部分：如何通过npm和如何设置create-react-app的Webpack来触发重新编译。

I will split my answer in two parts: how to setup a locally linked package through npm and how to setup create-react-app's Webpack to trigger a recompile.

到设置本地程序包，您必须在项目的 node_modules 文件夹内创建指向程序包的符号链接。一种简单的方法是使用 npm链接命令。为此，进入包文件夹并运行 npm link ，然后进入项目文件夹并运行 npm link package-name 。

To setup a local package, you have to create a symlink inside your project's node_modules folder pointing to your package. An easy way to do this is with the npm link command. To do this, go into your package folder and run npm link and then go into your project folder and run npm link package-name.

如果您做对了，您应该能够检查是否在node_modules文件夹内创建了指向包文件夹的符号链接。如果它不起作用，请确保您的 package.json 文件指向您的软件包的正确位置。例如：

If you did this right, you should be able to check that a symlink was created inside your node_modules folder pointing to your package folder. If it does not work, make sure your package.json file points to the right location for your package. e.g:

    "dependencies": {
      "package-name": "file:../relative/path/to/your/package"
    }

使create-react-app触发重建关于本地软件包更改

如果查看create-react-app的来源，您会注意到文件 webpackDevServer.config.js 具有以下选项：

    watchOptions: {
      ignored: ignoredFiles(paths.appSrc),
    }

其中的filenames是导入匹配的正则表达式node_modules 。这意味着create-react-app会显式忽略 node_modules 更改的重建（尽管有一个例外，那就是在添加新软件包时，使用 webpack.config.dev.js 中的$ c> WatchMissingNodeModulesPlugin ）。

Where ignoredFiles is an imports a regex that matches node_modules. This means that create-react-app is explicitly ignoring rebuilds on node_modules changes (there is an exception though, that is on new package addition, which is done by using WatchMissingNodeModulesPlugin in webpack.config.dev.js).

原因是某些计算机在检查整个 node_modules 文件夹中的更改时速度变慢。我的建议是通过使用正则表达式仅排除本地软件包来覆盖 ignoredFiles 函数。例如：

The reason for this is that some computers are slowed down when checking the whole node_modules folder for changes. My suggestion is to override the ignoredFiles function, by using a regexp to only exclude your local package. e.g.:

    const ignoredFiles = function (appSrc) {
      return new RegExp(
        `^(?!${escape(
          path.normalize(appSrc + '/').replace(/[\\]+/g, '/')
        )}).+/node_modules/(?!package-name)`,
        'g'
      );
    };

不幸的是，您将不得不从create-react-app弹出或覆盖您的 webpackDevServer.config.js （例如，通过使用 rewire ）可以应用上述更改。

Unfortunatelly you will have to eject from create-react-app or override your webpackDevServer.config.js (by using rewire for example) to be able to apply said changes.

这篇关于依赖项更改时重新编译create-react-app的智能方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！