esbuild

Rails7のアプリでJSのビルドツールはesbuildを使用します。 環境構築の方法はこちらを参照ください↓↓ www.mof-mof.co.jp ReactとTypeScriptをインストールする 1. 以下のコマンドで必要なパッケージをインストール yarn add typescript react react-dom react-router-dom @types/react @types/react-dom @types/react-router-dom 2. package.json のビルドスクリプトの末尾に --loader:.js=jsx を追記 例） "build:js":…

Rails7以前で Tailwind CSS を使用したい場合はWebpackerを使って yarn add tailwindcss して ほげほげファイルを追加して〜〜としていたと思います。 Rails7からはWebpackerが標準ではなくなったので、導入方法が変わりました。 プロジェクト作成時に導入する方法と、既存のプロジェクトに途中から導入する方法をまとめてみました。 （今回はesbuildを使用してます。） プロジェクト作成時に導入する場合 1. rails new mofmof -j esbuild --css tailwind でプロジェクトを作成する 2. 以下を packag…

Rails7がリリースされてから、環境構築で躓いた経験がある方は少なくないのではないでしょうか。 今回は、Rails7 + PostgreSQL + esbuild の環境を docker-compose で構築していきたいと思います。 Rails7 + PostgreSQL + importmap の環境構築については以下の記事をご参照ください。 www.mof-mof.co.jp 1. ファイルを準備する まず始めに、以下の2つのファイルを作成します。 Dockerfile.dev docker-compose.yml Rails7.1から rails new で新規プロジェクトを作成した…

Rails7のフロントエンド開発環境としてjsbundlingのesbuildを採用した際にTypeScriptの導入に少し手こずりましたので備忘録として記事にしました。参考になれば幸いです。 esbuildではTypeScriptの型チェックは行ってくれない esbuildはデフォルトでTypeScriptのコンパイルをサポートしています。 そのため、特段何かインストールしたりや設定する必要はありません。 ただしサポートしているのはコンパイルのみで、型チェックまでは行ってくれません。そのため別途tsc -noEmit等のコマンドを並行して実行する必要があります。 それを踏まえると以下のような…

テクノロジー本部の相馬です。好きな Web API は Window.requestAnimationFrame() です。 私が現在所属しているグループでは、弊社のメイン事業である LIFULL HOME'S における開発効率の改善などを行っています。 私はフロントエンドの開発環境の改善などを主に担当しております。 今回は、LIFULL HOME'S の JavaScript 開発環境のビルドを、esbuild を使ってビルドしたところ、当社比で 55 倍高速になった事例について紹介いたします。 目次 サマリ Before/After はじめに 従来の開発環境について 開発環境のインスタンス…

はじめに まずはwebpack esbuild swc Snowpack Vite まとめ

皆さんこんにちは、フロントエンドエンジニアの高野です。 皆さんはJSのバンドラーは何を使われていますか？ 私たちフロントエンドチームでは主にwebpack、一部browserifyを使用しています。 最近はReactやVueをブイブイ使いビジネスロジックをもつことも多くなっており、そのためJSのバンドルサイズは嵩む一方です。 そうなってくると気になるのはビルド時間です。 私の担当しているプロジェクトでもwebpackのビルドが34秒かかっており、今後さらにプロジェクトが大きくなれば1分越えも夢ではないです... そこで、Snowpack v3をにチャレンジしてみました。 Snowpackとは …