はてなブックマーク

StorybookでバンドラーにViteを使うStorybookをViteで開発する方法を紹介します。preactプロジェクトではハマりどころがあるため、その点を丁寧に解説しています。また、Storybookの設定ファイルを型安全にする方法も紹介しています。 はじめにStorybook で Vite を使ってビルドできるようになったので紹介します。 iframe 内のビルドを Webpack から vite に切り替えることで次の利点があります。 ビルド速度の改善HMR の高速化アセット処理の自動化Vite プロジェクト設定との互換性Vite のプラグインエコシステムへのアクセスコンポーネントが少ない場合、速度の恩恵はあまり感じられない可能性があります。 Webpack と比較すると、ブラウザが表示されるまでのスピードは劇的に向上しますが、 ブラウザ上での読み込みに時間がかかるためです1。

JestでTypeScriptを高速化するJestでテストの高速化させる方法を紹介します。トランスフォーマーとしてesbuildやswcを紹介し、TypeScriptで遅くなりがちなトランスパイルを高速化させることで、テストを自体を高速化します。 はじめにesbuild の登場により、フロントエンドの世界は、開発環境により速度を求めるようになりました。vite の隆盛はその最たるものといってもいいでしょう。 esbuild や swc は高速な Go や Rust によって書かれ、更に多くの場合、Typescript の型チェックを省略しています。 tsc の型チェックは、大抵 IDE やワークフローで行われているので、これらを削ぎ落とすことで、純粋なコンパイラとして JavaScript への変換に特化しているということですね。 さて、Typescript コードをテストする際、多くの場

ViteでPreactのTypescript環境を構築するNo bundleツールのViteを使って、TypescriptベースのPreactの環境を構築します。ESLintやPrettierの設定もあわせて行います。 はじめにVite は Vue.js の作者の Evan You 氏が開発しているビルドツールです。 ネイティブの ES Module のインポートを利用し、バンドル不要で高速に動作する開発環境を提供します。 Vue3 はもちろん、React や Preact も対応しています。 今回はそんな Vite を使って、Preact プロジェクトの環境構築をします。 できあがったテンプレートはこちらにあります。 やることpreact/cli の default テンプレートに近づけることを目標に、最低限開発に必要なツールを導入していきます。 ツールを個別に導入できるよう、それぞれ順