故事背景

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

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

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

坑一：

不要按照官網的下載指令一步步操作，因為這樣最終會下載 6.5 穩(wěn)定版

# 錯誤安裝方式
npx storybook init
npx sb init
# 正確安裝方式
npx storybook@next init 
npx sb@next init

坑二：

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

# 錯誤命令
npx sb init --builder @storybook/builder-vite
npx storybook init --builder vite

坑三：

7.0 的版本不要在 monorepo 的項目中創(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)建一個 vite 的項目，然后在這個項目中去初始化 Storybook 然后將相關的命令、文件夾及 devDependencies 中相關的包全部 cv 到對應的子項目中重新下載依賴即可使用。

具體操作如下：

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

注意：

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

總結

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

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

最新評論