Viteはいいぞ/Vite is Good

Transcript

1. Viteはいいぞ 2022-05-18 FukuokaJS @dojineko
2. どじねこ @dojineko GMOペパボ / よろず屋
3. 今日お話しする内容
4. もくじ ➔ Viteってなぁに？ ➔ テストで活躍するVitest ➔ Node.jsアプリが作れるvite-node ➔ まとめ
5. Viteってなぁに？
6. まず「Vite」ってなぁに？ • Vueの創始者Evan You氏開発の ”次世代のフロントエンドツール” ◦ 「ヴィート」と読みます (フランス語の「高速」に由来) • 高速な開発サーバーやHMR(Hot Module Replacement)をサポート • RollupなどをベースとしておりネイティブESMで処理される • TypeScriptを標準でサポートする • ほとんどの場合には細かい設定は不要 • VueだけでなくReactやSvelte、VanillaJSなどもサポート • Nuxt.js 3 のビルドシステムとして実験的に採用された
7. ～ 基本使用時のVite周りのざっくりとした関係図 ～ TSX CSS PNG HTML TS エントリに なるHTML ビルド結果
8. Webpackで試される設定パズル力の例 .ts を babel-loaderで 処理する設定 webpackで処理する 対象に ts と js を設定 出力先の設定
9. ViteでReactを使用する例 react を使う宣言だけ！
10. ViteでVueを使用する例 vue を使う宣言だけ！
11. 設定がとにかくカンタン！
12. 公式サイトは日本語対応！ブラウザ or１コマンドからはじめられる！ 〜 https://ja.vitejs.dev/ 〜
13. • Viteプラグインの vite-plugin-node を使えば ViteのSSR機構のみを使ってAPIサーバーを開発できる ◦ https://www.npmjs.com/package/vite-plugin-node • ViteがHMRに対応しているので、 開発中には実装の変更はシームレスに反映される • Express や Koa、Nest、fastify などの メジャーなフレームワークに対応 • フロントエンド部分がいらないよーという場合は便利 【余談】ViteでWebAPIをつくりたいときは？
14. テストで使えるVitest
15. Vitestってなあに？ • Viteのビルドスタックを使ったテストフレームワーク • テストの世界にもViteの高速なビルドスタックを持ち込める ◦ もちろんESMにも標準対応 • Jestとある程度APIに互換性があり テストファイルの大きな書き換えの必要がない • やはり設定はほとんどいらない ◦ TypeScriptで書いたテストもそのまま実行できる ◦ jest.config.json 業から解放される
16. Jestでも試される設定パズル力の例 TSでテストを書きたい けどたくさんの設定を 正しく書くことは難しい
17. 細かい設定が必要なければ vite.config.ts も不要 Vitest向けのViteの設定例 かんたんだね！
18. expect などの テスト用関数の 参照先を変えればOK テストコードの構造 は大きな変化がない JestのテストをVitestに書き換えた例
19. テストが約50%高速になった！ 実行時間が 約半分に！ JestからVitestに移行した事例
20. Vitest公式でJestからの移行ガイドが用意されています ~ https://vitest.dev/guide/migration.html ~
21. Node.jsアプリが作れるvite-node
22. vite-nodeってなあに？ • Vitestのコアコンポーネントの一つ ◦ Vitestが更新され続ける間は安泰(かも？) • Viteの高速なビルドスタックを使ってNode.jsアプリを作れる ◦ もちろんESMにも標準対応 • TypeScriptで書いたコードをそのまま実行できる ◦ ts-node-esm のように使える • Viteの便利な部分をフロントエンドだけではなく、 サーバーアプリやCLIアプリの作成でも活用できる
23. vite-node を使ったCLIアプリの作成手法をご紹介しています！ 〜 vite-nodeでNode.js製のCLIアプリを作る 〜
24. まとめ
25. まとめ • ViteはRollupなどをベースとした次世代のビルドシステム • ほとんどの場合に設定がいらない！ (ほぼゼロコンフィグ) ◦ 設定ファイルのメンテナンスからの解放 • TypeScriptがすぐかけて実行できる ◦ 何かと面倒な初期設定をズバズバスキップ • 対応パッケージを使用すると、フロントエンド以外でも大活躍 ◦ vitest: 超高速でESMに対応したテストランナー！ ◦ vite-node: Node.jsアプリの開発に！
26. Viteでもっと手軽な開発を！