Storybook, builerをViteにしてみる

[penicillin0]

close #1255

TODO:

• Vite でbuildできるようにする
  • for 開発環境
  • for ホスティング
• webpack5との速度比較

[netlify]

✅ Deploy Preview for ingred-ui ready!

Name	Link
🔨 Latest commit	5579ac3
🔍 Latest deploy log	https://app.netlify.com/sites/ingred-ui/deploys/6462bfb411db9b00088942fa
😎 Deploy Preview	https://deploy-preview-1256--ingred-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[penicillin0]

どっちもcache削除後
storybookjs/storybook#13200 (comment)

結果

ローカル

---

builder	for manager	for preview	total
webpack5	388 ms	20 sec	~ 20sec
vite	369 ms	4.49 sec	~ 5sec

Webpack5

20sec

Vite

4.49sec

[takurinton]

#1207 で TypeScript のバージョン上げた影響でコンフリクト起こしてるので解消してもらえるとmm

[takurinton]

おっと 👀

Error [ERR_REQUIRE_ESM]: require() of ES Module /home/runner/work/ingred-ui/ingred-ui/node_modules/wrap-ansi/index.js from /home/runner/work/ingred-ui/ingred-ui/node_modules/cliui/build/index.cjs not supported.

[takurinton]

あと、挙動については今日定例で他の人にも触ってもらって確認します！（自分と @penicillin0 はマシンスペックが同じなのでローカルでの比較という文脈ではあまり意味がなさそうなので）

[penicillin0]

手元で再現した

$ yarn storybook
yarn run v1.22.19
$ storybook dev -p 6006
/Users/hoge/git/ingred-ui/node_modules/boxen/index.js:8
const wrapAnsi = require('wrap-ansi');
                 ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/hoge/git/ingred-ui/node_modules/wrap-ansi/index.js from /Users/hoge/git/ingred-ui/node_modules/boxen/index.js not supported.
Instead change the require of /Users/hoge/git/ingred-ui/node_modules/wrap-ansi/index.js in /Users/hoge/git/ingred-ui/node_modules/boxen/index.js to a dynamic import() which is available in all CommonJS modules.
    at Object.<anonymous> (/Users/hoge/git/ingred-ui/node_modules/boxen/index.js:8:18)
    at Object.<anonymous> (/Users/hoge/git/ingred-ui/node_modules/@storybook/core-server/dist/index.js:35:8716)
    at Object.<anonymous> (/Users/hoge/git/ingred-ui/node_modules/@storybook/cli/dist/generate.js:1:1255)
    at Object.<anonymous> (/Users/hoge/git/ingred-ui/node_modules/@storybook/cli/bin/index.js:9:1)
    at Object.<anonymous> (/Users/hoge/git/ingred-ui/node_modules/storybook/index.js:3:1) {
  code: 'ERR_REQUIRE_ESM'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[takurinton]

lockfile 更新後、自分の手元だと再現しなかったのでもう1回 master 取り込んで大丈夫そうだったらマージしてもいいかもしれないです

[takurinton]

storybook なので netlify のデプロイだけうまくいけば良さそう

[takurinton]

自分と @penicillin0 以外の人にも試してもらった
良さそうなので、マージする

できた、速くなった:+1:

https://cartaholdings.slack.com/archives/C02Q8F3FQBC/p1684216875283539?thread_ts=1684216443.351889&cid=C02Q8F3FQBC