當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？

發(fā)布時間：2023/12/9 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

大家好，我是若川。最近組織了源碼共讀活動《1個月，200+人，一起讀了4周源碼》，已經(jīng)有超50+人提交了筆記，群里已經(jīng)有超1500人，感興趣的可以點此鏈接掃碼加我微信?ruochuan12

create-vue公開了，可以使用npm init vue@next替代vue-cli快速初始化vue3項目。我粗看了源碼，發(fā)現(xiàn)只有300行左右，打算加入到源碼共讀計劃大家一起學(xué)習(xí)。

沒想到源碼共讀群里的小伙伴 upupming 就很迅速的學(xué)習(xí)了源碼并且輸出了文章。本文是upupming投稿。

原標題：create-vue 發(fā)布并成為官方推薦，未來將替換 vue cli，看看 Vue Contributor Days 說了哪些內(nèi)容（附 create-vue 源碼解析）

美國時間 2021 年 10 月 7 日早晨，This Dot Media 邀請了 Vue 的核心成員和 Vue Community （例如 Quasar, Ionic 開發(fā)者等）的一些主要貢獻者舉辦了一個 Vue Contributor Days 在線會議，長達兩個半小時，會上 vue-cli 的核心貢獻者胖茶也在同一天公開了全新的腳手架工具 create-vue^[1]，我也是看到 antfu 發(fā)推就關(guān)注了一下，看完直播回放^[2]之后收獲很大，這里做一些總結(jié)并且分析一下最新發(fā)布的 create-vue 的源碼。

主要關(guān)注了尤大的 talk，PPT 鏈接^[3]在這里，我轉(zhuǎn)載到了我的 GitHub 上^[4]，大家可以下載來看一下最新的進展，另外還有胖茶現(xiàn)場演示了如何使用 create-vue。

1. 主要內(nèi)容

Vue 3.2 在 2021.08.09 就已經(jīng)發(fā)布了，最重要的就是 <script setup> 不再是實驗階段了，可以穩(wěn)定使用。之前用過 composition API 的朋友都會覺得比較麻煩，<script setup> 主要是為了作為語法糖簡化其寫法，可以參考文檔^[5]和 RFC^[6]。Vue 3.2 新增了一些新功能，如 defineCustomElement 和 v-memo 等等。

尤大還提到了新的 Ref Transform 提案，雖然現(xiàn)在 TS 環(huán)境下多一個 .value 沒有什么太大的問題，類型提示能夠自動補全做的很好，但是 Ref Transform 提案可以進一步簡化省去 .value 這一步，而且 TS 支持也做好了：

20211009173845

使用 cout = $ref(0) 定義之后，使用 count 的時候會被編譯成 count.value，同時還有一個反向操作 $$，重新把 reactive value 變成 ref。感覺這個簡化確實很有前途，可能會被廣泛使用。

另外 Vue 團隊正在積極準備 3.3 版本，主要集中精力在優(yōu)化 SSR 相關(guān)的功能。可以期待一下。

尤大給出了最新的官方推薦：

20211009174500

推薦使用 create-vue 替換 vue cli，注意如果你的項目如果使用 vue cli 創(chuàng)建的，能夠穩(wěn)定使用的話，暫時沒有提供轉(zhuǎn)換成 create-vue 項目的方案，而且也不建議修改大型項目的基礎(chǔ)配置。以后的新項目大家可以使用 create-vue 來創(chuàng)建更加快的應(yīng)用，因為 create-vue 的模板項目都是基于 vite 來進行構(gòu)建的了。
推薦使用 VSCode 的 Volar 插件而不是 Vetur 來獲取更好的 TypeScript 支持（script setup 支持地很好, vue-tsc 表現(xiàn)和 volar 一致，因為都是用的一個 language service (@johnsoncodehk 開發(fā)的 vscode-vue-languageservice)），卸載 Vetur 安裝 Volar 即可。
狀態(tài)管理的話，正在考慮在 vuex next / Pinia (也是新出來的一個狀態(tài)管理工具) / vue core 三者中考慮一個新的主推

另外 Vue 3 的官方文檔正在快速更新，新版的文檔可以在 https://github.com/vuejs/docs/tree/next 看到源碼，部署在 https://vue-docs-preview.netlify.app/ 。里面新增了許多 example，可以看 Options API 和 Composition API 兩種格式，Composition API 已經(jīng)都是用 script setup 來寫的了，另外也有 HTML 和 SFC 兩種不同的版本，感覺用 example 學(xué)起來方便很多。同時也提供了 tutorial 和 guide 兩種學(xué)習(xí)方案，非常體貼。

胖茶介紹了 create-vue 的使用，令人興奮的是，所有的模板現(xiàn)在的構(gòu)建工具全部都是基于 vite 而不是 vue cli (Webpack) 的了，開發(fā)效率大大提升，同時使用 cypress 來作為自動測試的工具。之前 Vue 2 單元測試用的是 Jest，但是 Jest 對 Vue 3 的編譯支持的不是很好，所以選擇了 cypress 同時做單元測試和 E2E 測試。整個 create-vue 包的依賴數(shù)量非常少，很多沒有必要的依賴都沒放，而且胖茶自己做了一個預(yù)先打包導(dǎo)致下載速度變快了許多。同時創(chuàng)建的模板項目也足夠輕量。

后面 antfu 還介紹了最近他開發(fā)的 unplugin^[7]，支持一個插件寫完，Rollup、Vite、Webpack 4、Webpack 5 都能使用，這個還沒有詳細使用過，下次有機會細看。

2. create-vue 源碼解析

首先看目錄結(jié)構(gòu)：

index.js 是整個 CLI 的打包入口，所有邏輯都是從這里開始的
utils 包含了用到的一些工具函數(shù)
template Vue 項目模板，例如默認的 default 模板、帶 router 的模板、帶 ts 支持的模板等等。
playground 利用 create-vue 生成的項目的快照結(jié)果，在運行 pnpm test 時會用到，測試生成的模板項目代碼的正確性

非常簡潔明了，好在項目處于剛開始的階段，index.js 只有 300 多行，可以很容易了解其中的細節(jié)。

2.1 整體流程

使用 prompt 詢問用戶一系列 Yes/No 的問題，看用戶需要哪些 feature，包括 TS, JSX, router, vuex, cypress。同時也會詢問包名和是否覆蓋已經(jīng)存在的文件夾（如果之前已經(jīng)創(chuàng)建過內(nèi)容的話）。
驗證包名是否合法，將不合法包名轉(zhuǎn)換成合法的。
寫入帶包名和版本號的 package.json
調(diào)用 render 函數(shù)，首先使用 render('base') 創(chuàng)建一個基礎(chǔ)的模板，接下來按照用戶需要哪些 feature，往已經(jīng)創(chuàng)建的項目中添加對應(yīng)的模板，例如 render('config/jsx') 就是對基礎(chǔ)模板添加了 JSX 支持。
如果需要 TS 支持的話，后面有個特殊操作把所有 JS 重命名為 TS。將 jsconfig.json 重命名為 tsconfig.json。
默認是所有模板都包含測試的，如果用戶不需要，最后需要刪除一下
判斷當(dāng)前使用的包管理器是 npm/yarn/pnpm，方便后續(xù)輸出 xxx install 提示
生成 README.md
最后輸出提示，提示用戶生成成功并展示綠色（kolorist 這個包用來處理顏色）的提示消息，提示后續(xù)操作 cd xxx, xxx install, xxx dev

可以先運行一遍 npm init vue@next 感受一下具體的效果。

2.2 具體分析

可以看到，這里面最重要的還是 render 函數(shù)的實現(xiàn)，可以把一個相對目錄下的文件給復(fù)制到最終生成的項目里面，同時還需要考慮文件相同的時候需要如何進行合并操作。這里主要看一下 render 函數(shù)的實現(xiàn)和一些我們以后可能用到的工具函數(shù)。

2.2.1 支持 feature flag

支持類似 npm init vue@next --vuex --ts 這種命令行參數(shù)，省去 prompt 提問環(huán)節(jié)直接開始生成項目。

//?index.jsconst?isFeatureFlagsUsed?=typeof?(argv.default?||?argv.ts?||?argv.jsx?||?argv.router?||?argv.vuex?||?argv.tests)?==='boolean'prompt( //?... {name:?'needsTypeScript',//?如果使用了?feature?flag，直接?type?函數(shù)返回?null，就不會提問了type:?()?=>?(isFeatureFlagsUsed???null?:?'toggle'),message:?'Add?TypeScript?',initial:?false,active:?'Yes',inactive:?'No' }, ) //?...

2.2.2 render 函數(shù)

//?index.js//?所有模板根目錄位于?template?之下 const?templateRoot?=?path.resolve(__dirname,?'template') //?傳給一個模板名稱，例如?`base`，對應(yīng)于?template/base?這個模板 const?render?=?function?render(templateName)?{//?拿到真正的模板路徑?templateDir?之后使用?renderTemplate?將?templateDir?下的內(nèi)容嘗試生成到?root?中，這里?root?就是之前用戶輸入指定的目標路徑const?templateDir?=?path.resolve(templateRoot,?templateName)renderTemplate(templateDir,?root) }

template/base 是一個最簡單的所有結(jié)果都需要模板，它包括了 .vscode、index.html、vite.config.js 等這些基礎(chǔ)性的東西。注意 vite 的理念和 Webpack 不一樣，Webpack 和 esbuild 這些都是以 JS 為入口，但是 vite 是以 index.html 為入口的，使用的時候需要轉(zhuǎn)換一下思維。這個模板的目錄結(jié)構(gòu)如下：

. ├── _gitignore ├── index.html ├── package.json ├── public │ └── favicon.ico └── vite.config.js

注意里面有個 _gitignore 文件，使用 _ 開頭是個慣例，因為以 . 開頭的都是配置文件，會影響一些 CLI 工具和編輯器的行為，所以為了避免影響而使用 _，真正 render 的過程中需要重命名成 . 開頭

我們主要看 renderTemplate 這個函數(shù)，位于 util/renderTemplate.js 中。

函數(shù)簽名注釋可以看，就是一個復(fù)制過程，但是又不完全是直接的復(fù)制，需要有一些特殊操作要考慮：

//?utils/renderTemplate.js/***?Renders?a?template?folder/file?to?the?file?system,*?by?recursively?copying?all?files?under?the?`src`?directory,*?with?the?following?exception:*???-?`_filename`?should?be?renamed?to?`.filename`*???-?Fields?in?`package.json`?should?be?recursively?merged*?@param?{string}?src?source?filename?to?copy*?@param?{string}?dest?destination?filename?of?the?copy?operation*/ function?renderTemplate(src,?dest)?{

如果發(fā)現(xiàn)傳入的是 src 文件夾的話，遞歸調(diào)用 renderTemplate 處理文件夾下的每一個文件或者文件夾：

//?utils/renderTemplate.jsconst?stats?=?fs.statSync(src)if?(stats.isDirectory())?{//?if?it's?a?directory,?render?its?subdirectories?and?files?recusivelyfs.mkdirSync(dest,?{?recursive:?true?})for?(const?file?of?fs.readdirSync(src))?{renderTemplate(path.resolve(src,?file),?path.resolve(dest,?file))}return}

遞歸調(diào)用寫好，下面就只需要考慮 src 是文件的情況了。

如果是 package.json 文件，并且目標路徑已經(jīng)存在，需要先 merge 兩個 JSON 對象，然后將 dependencies, devDependencies, peerDependencies, optionalDependencies 這 4 個字段按照字母序從上到下排列好。

if?(filename?===?'package.json'?&&?fs.existsSync(dest))?{//?merge?instead?of?overwritingconst?existing?=?JSON.parse(fs.readFileSync(dest))const?newPackage?=?JSON.parse(fs.readFileSync(src))const?pkg?=?sortDependencies(deepMerge(existing,?newPackage))fs.writeFileSync(dest,?JSON.stringify(pkg,?null,?2)?+?'\n')return}

如果文件以 _ 開頭，需要重命名成以 . 開頭：

if?(filename.startsWith('_'))?{//?rename?`_file`?to?`.file`dest?=?path.resolve(path.dirname(dest),?filename.replace(/^_/,?'.'))}

2.2.3 deepMerge 和 sortDependencies

這里有兩個比較有用的函數(shù)，deepMerge 用來 merge 兩個 object，相信這個也是面試的時候常考的一個題目，具體的思路就是如果都是對象的話就繼續(xù)遞歸，遞歸到原始類型的時候就可以直接賦值來實現(xiàn)賦值了，而數(shù)組的話直接用解構(gòu)賦值來一個淺拷貝就行了。

const?isObject?=?(val)?=>?val?&&?typeof?val?===?'object' const?mergeArrayWithDedupe?=?(a,?b)?=>?Array.from(new?Set([...a,?...b]))/***?Recursively?merge?the?content?of?the?new?object?to?the?existing?one*?@param?{Object}?target?the?existing?object*?@param?{Object}?obj?the?new?object*/ function?deepMerge(target,?obj)?{for?(const?key?of?Object.keys(obj))?{const?oldVal?=?target[key]const?newVal?=?obj[key]if?(Array.isArray(oldVal)?&&?Array.isArray(newVal))?{//?key?字段對應(yīng)的值都是?array，那么使用?destructuring?來?mergetarget[key]?=?mergeArrayWithDedupe(oldVal,?newVal)}?else?if?(isObject(oldVal)?&&?isObject(newVal))?{//?key?字段對應(yīng)的值都是對象，那么遞歸調(diào)用target[key]?=?deepMerge(oldVal,?newVal)}?else?{target[key]?=?newVal}}return?target }

sortDependencies 是將對象按照 key 進行排序，ES6 標準要求 object 對字符串類型的 key 按照插入序排列，對整數(shù)類型的 key 按照升序排列^[8]，因為依賴項都是 npm 包名，必然以字母開頭，可以按照插入序保證其迭代的時候的順序，從而使得解構(gòu)賦值能夠拿到正確的順序。

export?default?function?sortDependencies(packageJson)?{const?sorted?=?{}const?depTypes?=?['dependencies',?'devDependencies',?'peerDependencies',?'optionalDependencies']for?(const?depType?of?depTypes)?{if?(packageJson[depType])?{sorted[depType]?=?{}Object.keys(packageJson[depType]).sort().forEach((name)?=>?{sorted[depType][name]?=?packageJson[depType][name]})}}return?{...packageJson,...sorted} }

2.2.4 清除舊項目 rm -rf

之前經(jīng)常遇到一個問題是 fs.rmdirSync 這個函數(shù)只能刪除空文件夾，非空文件夾會報錯，搜索 Stack Overflow 給的最高票答案是用 rimraf^[9]，但是這里為了少引入包可以直接實現(xiàn)了遞歸刪除文件的功能。用的是多叉樹深搜中的后序遍歷，因為需要先刪除子文件和子文件夾，才能保證當(dāng)前文件夾為空。實現(xiàn)如下：

//?utils/directoryTraverse.jsexport?function?postOrderDirectoryTraverse(dir,?dirCallback,?fileCallback)?{for?(const?filename?of?fs.readdirSync(dir))?{const?fullpath?=?path.resolve(dir,?filename)//?如果是文件夾，遞歸if?(fs.lstatSync(fullpath).isDirectory())?{postOrderDirectoryTraverse(fullpath,?dirCallback,?fileCallback)//?子文件和子文件夾都處理好了再來用?dirCallback?處理這個文件夾dirCallback(fullpath)continue}//?如果是文件，直接用?fileCallback?處理fileCallback(fullpath)} }function?emptyDir(dir)?{postOrderDirectoryTraverse(dir,(dir)?=>?fs.rmdirSync(dir),(file)?=>?fs.unlinkSync(file)) }

這個工具函數(shù)也非常有用，又省去了一個 npm install。

3. 測試

寫完代碼需要進行測試保證正確性。package.json 中的測試腳本如下所示：

"build":?"esbuild?--bundle?index.js?--format=cjs?--platform=node?--outfile=outfile.cjs", "snapshot":?"node?snapshot.js", "pretest":?"run-s?build?snapshot", "test":?"node?test.js",

可以看到，首先是 pretest 運行 npm run build 進行打包，然后運行 npm run snapshot 生成 snapshot，生成快照過程就是各個 feature flag 排列組合一下，調(diào)用 create-vue 生成所有的可能的 feature flag 組合的模板結(jié)果，結(jié)果存放在 playground 文件夾下。排列組合可以使用二進制枚舉實現(xiàn)。代碼如下：

const?featureFlags?=?['typescript',?'jsx',?'router',?'vuex',?'with-tests']//?The?following?code?&?comments?are?generated?by?GitHub?CoPilot. function?fullCombination(arr)?{const?combinations?=?[]//?for?an?array?of?5?elements,?there?are?2^5?-?1=?31?combinations//?(excluding?the?empty?combination)//?equivalent?to?the?following://?[0,?0,?0,?0,?1]?...?[1,?1,?1,?1,?1]//?We?can?represent?the?combinations?as?a?binary?number//?where?each?digit?represents?a?flag//?and?the?number?is?the?index?of?the?flag//?e.g.//?[0,?0,?0,?0,?1]?=?0b0001//?[1,?1,?1,?1,?1]?=?0b1111//?Note?we?need?to?exclude?the?empty?comination?in?our?casefor?(let?i?=?1;?i?<?1?<<?arr.length;?i++)?{const?combination?=?[]for?(let?j?=?0;?j?<?arr.length;?j++)?{if?(i?&?(1?<<?j))?{combination.push(arr[j])}}combinations.push(combination)}return?combinations }const?flagCombinations?=?fullCombination(featureFlags) flagCombinations.push(['default'])for?(const?flags?of?flagCombinations)?{createProjectWithFeatureFlags(flags) }

之后再運行 test.js，就是對 playground 里面所有的項目依次運行 test:unit:ci（組件單元測試）和 test:e2e:ci（E2E測試）了：

const?playgroundDir?=?path.resolve(__dirname,?'./playground/')for?(const?projectName?of?fs.readdirSync(playgroundDir))?{if?(projectName.endsWith('with-tests'))?{console.log(`Running?unit?tests?in?${projectName}`)const?unitTestResult?=?spawnSync('pnpm',?['test:unit:ci'])console.log(`Running?e2e?tests?in?${projectName}`)const?e2eTestResult?=?spawnSync('pnpm',?['test:e2e:ci'])} }

4. 總結(jié)

看尤大的 talk 每次都有比較大的收獲，有很多細小的問題都會解釋的比較清晰，同時對 Vue 的未來規(guī)劃能了解一些。
create-vue 代碼簡潔，依賴少，啟動快，同時這次全面擁抱 vite 也將是非常好的，拋棄掉 Webpack 之后輕松了許多，開發(fā)體驗提升了不少。create-vue 中有不少工具函數(shù)可以先記下來，下次需要用到的時候就不愁沒處 copy 啦~
- 不過 create-vue 現(xiàn)在還沒有給模板添加 eslint 配置，后續(xù)可能會加上

參考資料

[1]

create-vue: https://github.com/vuejs/create-vue

[2]

直播回放: https://www.youtube.com/watch?v=gpTbH469Qog&ab_channel=ThisDotMedia

[3]

PPT 鏈接: https://docs.google.com/presentation/d/137pQTDQI8O1FHzn2AtjL5tjeTnr8wbON7IonkcNyBVs/edit#slide=id.p

[4]

我的 GitHub 上: https://github.com/upupming/frontend-learning-map/tree/main/slides/State_of_Vue_ThisDot_Meetup_Oct_2021.pdf

[5]

文檔: https://v3.vuejs.org/api/sfc-script-setup.html#basic-syntax

[6]

RFC: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md

[7]

unplugin: https://github.com/unjs/unplugin

[8]

ES6 標準要求 object 對字符串類型的 key 按照插入序排列，對整數(shù)類型的 key 按照升序排列: https://stackoverflow.com/a/23202095/8242705

[9]

rimraf: https://stackoverflow.com/a/16605300/8242705

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

總結(jié)

以上是生活随笔為你收集整理的vue-cli 将被 create-vue 替代？初始化基于 vite 的 vue3 项目为何如此简单？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： React开发（110）:注意state
下一篇：前端学习（3307）：函数组件userm