依赖项更改时重新编译 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 模式。

如果我可以在 my-package 中设置 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),
    }

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

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

    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）才能应用所述更改。