coverPiccoverPic

npm link 配合 Vite 插件监听 node_modules,丝滑调试 JS 库

💢前言

在尝试将我的个人博客里面的小工具封装成 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
  1. export const watchPackage = () => {
  2. {
  3. name: 'watch-npackage',
  4. configureServer: (server: ViteDevServer) : void => {
  5. server.watcher.options = {
  6. ...server.watcher.options,
  7. ignored: [
  8. /node_modules\/(?!package-name).*/,
  9. '**/.git/**',
  10. ]
  11. }
  12. }
  13. }
  14. }

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

🎇结语

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

0 条评论未登录用户
Ctrl or + Enter 评论
🌸 Run