本地调试 npm 包方案

本地调试 npm 包方案

自营后台进入开发之后，需要抽离组件和物料到 mortise-UI 和 物料库，本着‘工欲善其事必先利其器’的工作方式，先解决下本地调试 npm 包的方案。以下是几种方案：

方案一：

在 mortise-ui 项目中修改，在文档中查看修改效果，调试完成之后，再引入项目中调试；

• 进入到 mortise-ui 目录下；执行 npm run start（dumi 的开发模式 dumi dev），注意： node 版本不高于14，一般12或者14都可以，亲测 16报错。第一次启动需要在根目录执行 npm run init、在 mortise-ui 目录下执行 npm run build:doc

• 打开 本地监听的端口，修改相对应的组件，会热更新到页面；

• 修改完成之后，执行 npm run build:npm 进行打包

• 通过发布到 bnpm （方案不可取）；通过 yarn/npm link（方案二） 的方式查看；

方案二：

直接使用 yarn link 方式，将 mortise-ui 本地包连接到项目中；

• 进入到 mortise-ui 目录下，执行 yarn link；
• 进入到 homed_decorate_admin 项目中，执行 yarn link @homed/mortise-ui；
• 在 mortise-ui 修改之后，需要执行 npm run build:npm 进行打包；
• 在项目中会报错，找不到 mortise-ui（原因：build 时，会删除 dist 目录，），需要在项目中重新 command + s，

终极方案：

使用 yalc + nodemon 结合，监听改动，热更新到页面；

• 全局安装 yalc ，执行：npm i yalc -g；
• 全局安装 nodemon，执行： npm i -g nodemon；
• 进入到 mortise-ui 目录下，执行 yalc push（模拟本地包的发布）；
• 进入到 homed_decorate_admin 项目中，执行 yalc link @homed/mortise-ui，链接成功之后，本地会有 yalc.lock 和 .yalc 目录，这时已经可以连接到本地包了；
• 利用 nodemon 监听 mortise-ui 的改动，在 mortise-ui 目录下执行 npm run watch；由于 npm run build:npm 等待时间比较漫长，3-5分钟左右，经过分析，其实重要的是 dist 目录，所以只把 build.sh 中 rollup 打包的过程拿出来。组成了 npm run watch 的命令

"scripts": {
    "watch": "nodemon --ignore dist/ --ignore node_modules/ --watch src/ -C -e ts,tsx,less --debug -x 'npx rollup -c rollup.config.js --silent && yalc push'",
 },

• 经过上面流程，mortise-ui 的改动就会自动重新打包 并 yalc push，项目中也可以正常热更新；
  注意： 每次在项目中 npm i 操作之后，需要重新 yalc link

参考文档：

• yarn link
• yalc 更适普的前端link工具
• Node 工具 | nodemon 详解