在依赖项更改时重新编译create-react-app的智能方法

Question

我在我开发的包（my-package）中使用了create-react-app。 My-package与webpack捆绑在一起。

在重型测试循环期间，我经常更改my-package，并在npm i —save ../my-package的react-app中本地重新安装它，遗憾的是，此操作很慢，并且不会触发react-app的重新编译操作当我处于npm start模式时。

如果我可以在我的包中设置webpack —watch并且以某种方式将捆绑服务提供给react-app +重新编译触发器，那将是很好的。

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

Answer 1

我将把答案分为两部分：如何通过npm设置本地链接的包以及如何设置create-react-app的Webpack以触发重新编译。

设置本地包

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

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

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

使create-react-app触发本地包更改的重建

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

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

其中ignoredFiles是导入匹配node_modules的正则表达式。这意味着create-react-app明确忽略了对node_modules更改的重建（但有一个例外，即添加新包，这是通过在WatchMissingNodeModulesPlugin中使用webpack.config.dev.js完成的。

原因是在检查整个node_modules文件夹中是否有一些计算机速度变慢。我的建议是覆盖ignoredFiles函数，使用正则表达式只排除本地包。 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）才能应用所述更改。