💢前言
在尝试将我的个人博客里面的小工具封装成 JS 库时,开发调试遇到了一点小问题。
用 Vite 新建一个项目用来调试本地 JS 库,在使用npm link
链接,发现一个问题,包中源码修改后,项目开发模式下并没有触发热更新,感觉是 Vite 没有监听 node_modules 文件夹导致的。
🎗关于 npm link
npm link
是非常有用的命令,它允许开发者在本地开发和测试自己的 JavaScript 库或模块,而无需将其发布到 npm 仓库。它的使用主要分为两步:
- 在库的目录中运行
npm link
,这将在全局 node_modules 中创建一个指向当前目录的符号链接。这个链接允许其他项目引用这个库,就像它是一个已安装的包一样。 - 在需要使用该库的项目中,运行
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 库了。
0 条评论未登录用户
Ctrl or + Enter 评论