当依赖项发生变化时重新编译 create-react-app 的聪明方法

Question

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

在繁重的测试循环中，我经常更改我的包并使用 npm i —save ../my-package 在 react-app 中本地重新安装它，不幸的是，这个操作很慢并且不会通过 react 触发重新编译操作-当我处于 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 更改时的重建（不过有一个例外，即在添加新包时，这是通过在 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）才能应用上述更改。

Answer 2

我注意到，当通过 file: 属性添加依赖项时，CRA 将忽略更改。但是，使用 link: 代替，CRA 也开始侦听更改。

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

当依赖项发生变化时重新编译 create-react-app 的聪明方法

Smart way to recompile create-react-app when a dependency changes

webpack

create-react-app

设置本地包

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