yalc: 開發前端插件&組件比npm link 更好用


使用場景

1.在組件和插件依賴開發中,項目作為依賴庫沒辦法單獨直接運行,需要依賴進別的項目執行,這時候最常用的方式就是npm link。但用npm link引入的依賴由於資源文件不在項目下webpack不會對其做預編譯,導致實際構建或者運行時會報錯,此時如果直接將文件復制進依賴目錄則能正常運行,yalc能解決此類問題。

2.在一個項目中,我們會用 HRM 熱更新來讓我們修改的代碼在瀏覽器中快速看到效果,快速驗證我們的代碼是否正確。

當項目開始變大,為了提效、跨項目復用,我們會不可避免的需要開始去拆分一些通用的 NPM 模塊

yalc工作流程圖 

 

 

Yalc

yalc 可以在本地將npm包模擬發布,將發布后的資源存放在一個全局存儲中。然后可以通過yalc將包添加進需要引用的項目中。

這時候package.json的依賴表中會多出一個file:.yalc/...的依賴包,這就是yalc創建的特殊引用。同時也會在項目根目錄創建一個yalc.lock確保引用資源的一致性。因此,測試完項目還需要執行刪除yalc包的操作,才能正常使用。

整個過程相對於npm link會更加繁瑣一些,要經過發包、添加依賴,結束后也需要做清除操作,但也正因此才避免了npm link的一些問題。

安裝

NPM:
npm i yalc -g

Yarn:
yarn global add yalc

  

發布依賴

在所開發的依賴項目下執行發布操作

yalc publish

  

此時如果存在npm 生命周期腳本:prepublishprepareprepublishOnlyprepackpreyalcpublish,會按此順序逐一執行。如果存在:postyalcpublishpostpackpublishpostpublish,也會按此順序逐一執行。

想要完全禁用腳本執行需要使用

yalc publish --no-scripts

  

此時就已經將依賴發布到本地倉庫了。

當有新修改的包需要發布時,使用推送命令可以快速的更新所有依賴

yalc publish --push
yalc push // 簡寫

  

參數:

  • --changed,快速檢查文件是否被更改
  • --replace,強制替換包

添加依賴

進入到項目執行

yalc add [my-package]

  

可以看到項目中添加了yalc.lock文件,package.json對應的包名會有個地址為file:.yalc/開頭的項目。
也可以使用

yalc add [my-package@version]

  

將版本鎖定,避免因為本地新包推送產生影響。

參數:

  • --dev,將依賴添加進dependency
  • --pure,不會影響package.json文件
  • --link,使用link方式引用依賴包,yalc add [my-package] --link
  • --workspace (or -W),添加依賴到workspace:協議中

更新依賴

yalc update
yalc update [my-package]

  

會根據yalc.lock查找更新所有依賴

移除依賴

yalc remove [my-package]

yalc remove --all // 移除所有依賴並還原

  

查看倉庫信息

當我們要查看本地倉庫里存在的包時

yalc installations show

  

要清理不需要的包時

 
yalc installations clean [my-package]

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM