💢前言

在尝试将我的个人博客里面的小工具封装成 JS 库时，开发调试遇到了一点小问题。

用 Vite 新建一个项目用来调试本地 JS 库，在使用npm link链接，发现一个问题，包中源码修改后，项目开发模式下并没有触发热更新，感觉是 Vite 没有监听 node_modules 文件夹导致的。

🎗关于 npm link

npm link是非常有用的命令，它允许开发者在本地开发和测试自己的 JavaScript 库或模块，而无需将其发布到 npm 仓库。它的使用主要分为两步：

1. 在库的目录中运行npm link，这将在全局 node_modules 中创建一个指向当前目录的符号链接。这个链接允许其他项目引用这个库，就像它是一个已安装的包一样。
2. 在需要使用该库的项目中，运行npm link package-name。这将在项目自己的 node_modules 中创建一个符号链接，指向全局 node_modules 中的链接，从而实现库的本地引用。

🎀如何监听 node_modules

在npm link了之后，修改库的代码，发现页面并没有热更新。我尝试修改 vite.config.ts 中的server.watch.ignored发现并没有效果。

翻了一下 Vite Github 上的 issue，发现这个问题可以通过configureServer钩子修改server.watcher.options解决。在这里新建一个插件：

ts
export const watchPackage = () => {
  {
    name: 'watch-npackage',
    configureServer: (server: ViteDevServer) : void => {
      server.watcher.options = {
          ...server.watcher.options,
          ignored: [
              /node_modules\/(?!package-name).*/,
              '**/.git/**',
          ]
      }
    }
  }
}

在ignored中，通过正则的?!取反操作，排除了我们包的文件夹 package-name，从而完成监听。

🎇结语

这样子就可以愉快地开发调试 JS 库了。