當前位置：首頁 > 前端技术 > vue >内容正文

vue

从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器

發布時間：2023/12/9 vue 52 豆豆

生活随笔收集整理的這篇文章主要介紹了从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 前言

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以加我微信 ruochuan12 參與，每周大家一起學習200行左右的源碼，共同進步。已進行四個月了，很多小伙伴表示收獲頗豐。

想學源碼，極力推薦之前我寫的《學習源碼整體架構系列》 20余篇源碼文章。

本文倉庫 only-allow-analysis，求個star^_^^[1]

最近組織了源碼共讀活動，每周大家一起學習200行左右的源碼。每周一期，已進行到14期。于是搜尋各種值得我們學習，且代碼行數不多的源碼。

閱讀本文，你將學到：

1.?如何學習調試源碼 2.?學會?npm?鉤子 3.?學會?"preinstall":?"npx?only-allow?pnpm"?一行代碼統一規范包管理器 4.?學到?only-allow?原理 5.?等等

2. 場景

我們項目開發時，常需要安裝依賴，雖說一般用文檔可以說明。但不是比較強制的約束。是人就容易犯錯或者疏忽，假如規定是用的npm，而團隊里有人某一天不小心使用了其他包管理器安裝了的其他依賴，上傳了代碼，嚴重時可能導致線上問題。所以我們需要借助工具（代碼）來強制約束。

在源碼共讀第12期^[2]中，我們學習了尤雨溪推薦神器 ni ，能替代 npm/yarn/pnpm ？簡單好用！源碼揭秘！根據鎖文件自動匹配相應的包管理器，運行相應的命令。

在源碼共讀第3期^[3]中，我們學習了Vue 3.2 發布了，那尤雨溪是怎么發布 Vue.js 的？

其中 Vue3 源碼用了 npm 的 preinstall 鉤子^[4] 約束，只能使用 pnpm 安裝依賴。我們接著來看其實現。

3. Vue3 源碼 && npm 命令鉤子

//?vue-next/package.json {"private":?true,"version":?"3.2.22","scripts":?{"preinstall":?"node?./scripts/preinstall.js",} }依次執行 #?install?之前執行這個腳本 preinstall #?執行?install?腳本 install #?install?之后執行這個腳本 postinstall

當然也支持自定義的命令。

更多可以查看官方文檔鉤子^[5]。

接著我們來看 preinstall^[6] 源碼。

//?vue-next/scripts/preinstall.jsif?(!/pnpm/.test(process.env.npm_execpath?||?''))?{console.warn(`\u001b[33mThis?repository?requires?using?pnpm?as?the?package?manager?`?+`?for?scripts?to?work?properly.\u001b[39m\n`)process.exit(1) }

這段代碼也相對簡單，校驗如果不是 pnpm 執行腳本則報錯，退出進程。

關于 process 對象可以查看阮一峰老師 process 對象^[7]

process.argv 屬性返回一個數組，由命令行執行腳本時的各個參數組成。它的第一個成員總是 node，第二個成員是腳本文件名，其余成員是腳本文件的參數。

這段代碼能解決文章開頭場景提出的問題，但是總不能每個項目都復制粘貼這段代碼吧。我們是不是可以封裝成 npm 包使用。當時我也沒想太多，也沒有封裝 npm 包。直到我翻看 vite^[8] 源碼發現了 only-allow^[9] 這個包。一行代碼統一規范包管理器。

{"scripts":?{"preinstall":?"npx?only-allow?pnpm?-y"} }

當時看到這段代碼時，我就在想：他們咋知道這個的。當時依舊也沒想太多。直到有一天，發現 pnpm 文檔 Only allow pnpm 文檔^[10] 上就有這個。好吧，吃了沒看文檔的虧。那時我打算分析下這個only-allow 包的源碼^[11]，打開一看驚喜萬分，才 36 行，寫它，于是寫了這篇文章。

按照慣例，看源碼前先準備環境。

4. 環境準備

先克隆代碼。

4.1 克隆代碼

#?推薦克隆我的源碼庫 git?clone?https://github.com/lxchuan12/only-allow-analysis.git cd?only-allow-analysis/only-allow #?npm?i?-g?pnpm pnpm?i#?或者克隆官方倉庫 git?clone?https://github.com/pnpm/only-allow.git cd?only-allow #?npm?i?-g?pnpm pnpm?i

開源項目一般先看README.md^[12]。

Force a specific package manager to be used on a project

強制在項目上使用特定的包管理器

Usage

Add a preinstall script to your project's package.json.

If you want to force yarn^[13], add:

{"scripts":?{"preinstall":?"npx?only-allow?yarn"} }

同理可得：強制使用 npm、pnpm也是類似設置。

4.2 調試源碼

我們通過查看 package.json 文件。

//?only-allow/package.json {"bin":?"bin.js", }

確定主入口文件為 only-allow/bin.js。

在最新版的 VSCode 中，auto attach 功能，默認支持智能調試，如果發現不支持，可以通過快捷鍵 ctrl + shift + p 查看是否啟用。

于是我們在 only-allow/package.json 文件中，添加如下命令。

//?only-allow/package.json {"scripts":?{"preinstall":?"node?bin.js?pnpm"}, }

可以提前在 only-allow/bin.js 文件打上斷點 const usedPM = whichPMRuns()

按快捷鍵 ctrl + ` 快捷鍵打開終端。輸入如下 yarn add release-it -D 命令，即可調試 only-allow/bin.js。

調試截圖

最終調試完會在終端報錯提示使用 pnpm install。

如下圖所示：

終端報錯截圖

更多調試細節可以看我的這篇文章：新手向：前端程序員必學基本技能——調試JS代碼^[14]

接著我們按調試來看源碼主流程。

5. only-allow 源碼

//?only-allow/bin.js #!/usr/bin/env?node const?whichPMRuns?=?require('which-pm-runs') //?輸出邊框盒子 const?boxen?=?require('boxen')const?argv?=?process.argv.slice(2) if?(argv.length?===?0)?{console.log('Please?specify?the?wanted?package?manager:?only-allow?<npm|pnpm|yarn>')process.exit(1) } //?第一個參數則是?用戶傳入的希望使用的包管理器 //?比如?npx?only-allow?pnpm? //?這里調試是?node?bin.js?pnpm const?wantedPM?=?argv[0] //?npm?pnpm?yarn?都不是，則報錯 if?(wantedPM?!==?'npm'?&&?wantedPM?!==?'pnpm'?&&?wantedPM?!==?'yarn')?{console.log(`"${wantedPM}"?is?not?a?valid?package?manager.?Available?package?managers?are:?npm,?pnpm,?or?yarn.`)process.exit(1) } //?使用的包管理器 const?usedPM?=?whichPMRuns() //?希望使用的包管理器?不相等，則報錯。 //?-?npm??提示使用?npm?install //?-?pnpm?提示使用?pnpm?install //?-?yarn?提示使用?yarn?install //?最后退出進程 if?(usedPM?&&?usedPM.name?!==?wantedPM)?{const?boxenOpts?=?{?borderColor:?'red',?borderStyle:?'double',?padding:?1?}switch?(wantedPM)?{case?'npm':console.log(boxen('Use?"npm?install"?for?installation?in?this?project',?boxenOpts))breakcase?'pnpm':console.log(boxen(`Use?"pnpm?install"?for?installation?in?this?project.If?you?don't?have?pnpm,?install?it?via?"npm?i?-g?pnpm". For?more?details,?go?to?https://pnpm.js.org/`,?boxenOpts))breakcase?'yarn':console.log(boxen(`Use?"yarn"?for?installation?in?this?project.If?you?don't?have?Yarn,?install?it?via?"npm?i?-g?yarn". For?more?details,?go?to?https://yarnpkg.com/`,?boxenOpts))break}process.exit(1) }

跟著斷點，我們可以查看到 which-pm-runs^[15]。

6. which-pm-runs 當前運行的是哪一個包管理器

最終返回包管理器和版本號。

根據調試可知，process.env.npm_config_user_agent 是類似這樣的字符串。

"yarn/1.22.10 npm/? node/v14.16.0 linux x64"

'use?strict'module.exports?=?function?()?{if?(!process.env.npm_config_user_agent)?{return?undefined}return?pmFromUserAgent(process.env.npm_config_user_agent) }function?pmFromUserAgent?(userAgent)?{const?pmSpec?=?userAgent.split('?')[0]const?separatorPos?=?pmSpec.lastIndexOf('/')return?{name:?pmSpec.substr(0,?separatorPos),version:?pmSpec.substr(separatorPos?+?1)} }

6.1 String.prototype.substr 截取字符串

順帶提下。我之前在 vue-next 源碼看到的 pull request => chore: remove deprecated String.prototype.substr^[16]

String.prototype.substr is deprecated.

也就是說不推薦使用 substr。推薦使用 slice。

ecma 規范^[17]

7. 總結

我們通過從團隊需要規范統一包管理器的實際場景出發，講了 vue3 源碼中 preinstall 鉤子約束只能使用 pnpm 。同時通過查看 vite^[18] 源碼和 pnpm^[19] 文檔，了解到 only-allow^[20] 這個包。可以做到一行代碼統一規范包管理器"preinstall": "npx only-allow pnpm"。

也學習了其原理。only-allow 期待的包管理器和運行的包管理器對比。匹配失敗，則報錯。而which-pm-runs 通過獲取 process.env.npm_config_user_agent 變量獲取到當前運行腳本的包管理器和版本號。

我們通過文檔和溝通約束，不如用工具（代碼）約束。

文章寫到這里，讓我想起我2018年寫的文章參加有贊前端技術開放日所感所想^[21]

當時演講的大佬說過一句話。無比贊同。

技術（開源）項目本質上是：理念、套路、規范的工具化。

同時給我們的啟發也是要多看官方文檔和規范。

建議讀者克隆我的倉庫^[22]動手實踐調試源碼學習。

最后可以持續關注我@若川。歡迎加我微信 ruochuan12^[23] 交流，參與源碼共讀^[24] 活動，每周大家一起學習200行左右的源碼，共同進步。

參考資料

[1]

本文倉庫 only-allow-analysis，求個star^_^: https://github.com/lxchuan12/only-allow-analysis.git

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信江西拉你進群。

總結

以上是生活随笔為你收集整理的从 vue3 和 vite 源码中，我学到了一行代码统一规范团队包管理器的神器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：前端学习（2917）：上午回顾
下一篇：前端学习（3055）：vue+eleme