故事背景

基于 Vue + Vite + TS 結(jié)合 pnpm 的一個(gè) monorepo 項(xiàng)目的組件庫文檔編寫，起初個(gè)人是比較傾向于直接使用全家桶系列的 VitePress。無奈公司中其他庫文檔均使用 Storybook，并且已經(jīng)升級到最新版本。

好吧，到這里就基本知道了自己要做什么了。

由于之前也沒有接觸過這個(gè)玩意兒，就去看著官網(wǎng)一步步操作去了?？右簿驮谶@里了，誰知道版本上去了，文檔卻沒有做出相應(yīng)的調(diào)整。然后就有了后續(xù)一系列的問題。Storybook 7.0 下載

坑一：

不要按照官網(wǎng)的下載指令一步步操作，因?yàn)檫@樣最終會(huì)下載 6.5 穩(wěn)定版

# 錯(cuò)誤安裝方式
npx storybook init
npx sb init
# 正確安裝方式
npx storybook@next init 
npx sb@next init

坑二：

不要查找 vite 的創(chuàng)建項(xiàng)目方式，使用一些不明所以的命令。Storybook 會(huì)根據(jù)你項(xiàng)目技術(shù)棧創(chuàng)建出對應(yīng)的腳手架

# 錯(cuò)誤命令
npx sb init --builder @storybook/builder-vite
npx storybook init --builder vite

坑三：

7.0 的版本不要在 monorepo 的項(xiàng)目中創(chuàng)建除非是在根目錄

?ERR_PNPM_ADDING_TO_ROOT? Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.
An error occurred while installing dependencies.
?ERROR? Command failed with exit code 1: /Users/a1234/Library/pnpm/store/v3/tmp/dlx-36847/node_modules/.bin/storybook init --package-manager=pnpm

so 我的解決方案就是創(chuàng)建一個(gè) vite 的項(xiàng)目，然后在這個(gè)項(xiàng)目中去初始化 Storybook 然后將相關(guān)的命令、文件夾及 devDependencies 中相關(guān)的包全部 cv 到對應(yīng)的子項(xiàng)目中重新下載依賴即可使用。

具體操作如下：

• pnpm create vite myApp --template vue-ts 創(chuàng)建 vite 項(xiàng)目，隨后安裝依賴。
• pnpx storybook@next init --package-manager=pnpm
• 將 package.json 中關(guān)于 Storybook 的內(nèi)容進(jìn)行 cv，包括 scripts 中的兩條指令，devDependencies 中的一些包，項(xiàng)目中的兩個(gè)目錄。
• 復(fù)制到對應(yīng)的 monorepo 的子項(xiàng)目中，刪除子項(xiàng)目原有的 node_modeules 重新執(zhí)行 pnpm install 即可。

注意：

• 不要嘗試使用 --type vue3 類似的指令創(chuàng)建對應(yīng)的項(xiàng)目，大概率不會(huì)成功。
• Storybook 默認(rèn)使用 yarn 作為包管理工具，如果想要切換執(zhí)行指令時(shí)末尾增加 --package-manager=pnpm

總結(jié)

目前來看經(jīng)過上面一系列的摸索過后，本地測試，打包都沒有什么問題，就看后續(xù)部署了。如果后續(xù)在使用過程中碰到其他問題也會(huì)持續(xù)在這里進(jìn)行更新。

以上就是Storybook 7.0 Beta Vue3踩坑隨筆的詳細(xì)內(nèi)容，更多關(guān)于Storybook 7.0 Beta Vue3的資料請關(guān)注腳本之家其它相關(guān)文章！