本地高效调试npm包方案
本文最后更新于 554 天前,其中的信息可能已经有所发展或是发生改变。

背景

在项目开发过程中,我们会通过用 HRM(Hot Module Replacement) 热更新来让我们修改的代码在浏览器中快速看到效果,来验证我们的代码是否正确。但是当项目开始慢慢变大,为了提效、跨项目复用等,我们会去拆分一些通用的 NPM 模块。对于拆分出来的 NPM 模块随着业务场景的变化、技术的发展等因素 会对其进行优化或者重构,但因其本身是以依赖库的形式存在的,没办法单独直接运行,如果每次通过 修改->打包->发布->项目更新->项目启动 这样的形式去调试,效率太低,而且不经本地测试直接发布线上很容易出现问题,如果使用量大的话还会影响其他项目,这时候就需要找一个来解决这种 NPM 包本地调试和优化的方案

方案

方案1:npm link 或 yarn link

原理:
在全局包路径(Global Path)下创建一个软连接(Symlinked)指向 NPM项目中的的 dist 包;
在项目中里通过软连接,将全局的软链接指向其node_modules/npmName

# 第一步 在NPM项目中执行:
npm link
# or
yarn link

# 第二步 在项目中执行:
npm link npmName (非NPM项目文件夹名称,而是 package.json 中 name 的名称)
# or
yarn link npmName (非NPM项目文件夹名称,而是 package.json 中 name 的名称)

方案2:yalc

安装

npm i yalc -g
# or
yarn global add yalc

使用

# 第一步 在NPM项目中执行(发布依赖):
yalc publish
 
# 第二步 在项目中执行(添加依赖):
yalc add npmName
 
# 第三步 在NPM项目中执行(更新和推送)
yalc publish --push
# 简化为:
yalc push
 
然后修改的 NPM 包的内容直接就生效了

移除依赖 yalc remove npmName
移除所有 yalc remove --all


进阶

通过在 npm 包下安装 nodemon 插件,实现实时打包(npm run build) 和 更新推送 (yalc push),完全自动化同步到项目中

"scripts": {
    "build": "rimraf lib && rollup -c && rimraf lib/css.js",
    "async": "npm run build && yalc push",
    "watch": "nodemon --ignore lib/ --ignore node_modules/ --watch packages/ -C -e js,vue,ts,tsx,scss --debug -x 'npm run build && yalc push'"
  }

直接运行 npm run watch 实现

问题汇总

实际使用过程当中遇到了各种稀奇八怪的问题。。。。

build 编译报错

node 版本问题 && nvm 切换 node 版本有关

npm link 无效

因为某些版本的 nvm 在切换 node 的时候不会设定NODE_PATH 这个环境变数。 (homebrew 里 nvm 版本会有这个问题)

修改依赖后项目内容没更新 (项目用的vite)

vite官方文档中有相关描述:https://cn.vitejs.dev/guide/dep-pre-bundling.html#caching
可以添加 --force 来进行项目的项目的构建

  "scripts": {
    "dev": "vite --open --force --mode development",
  },

标题:本地高效调试npm包方案
地址:https://xiaodongxier.com/2045.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇