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

Question

我正在使用create-react-app和我开发的包(my-package).My-package与webpack捆绑在一起.

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

如果我可以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更改的重建(但是有一个例外,那就是新的包添加,这是通过使用WatchMissingNodeModulesPluginin 来完成的webpack.config.dev.js).

原因是在检查整个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(例如使用重新连接)以便能够应用所述更改.