Histoire📖 StoriesWrite stories to showcase and document your components. ⚡ FastIncredibly fast development building and production page loading!
Ladle | Ladle
🤝 Works with your existing toolsLadle is compatible with the Component Story Format and Controls. It supports links, themes, right-to-left, source code, a11y (axe), typescript and flow out of the box. ⚡ Fast, Accessible and SmallPowered by Vite, using esbuild, embracing ES modules and code-splitting with HMR/Fast Refresh for each story. 🛠️ Zero ConfigurationNo configuration needed but still cust
Vite を使う理由
Vite を使う理由 問題点 ES モジュールがブラウザーで利用できるようになるまで、開発者はモジュール化された JavaScript を生成するネイティブの仕組みを持っていませんでした。これは、私たちが「バンドル」のコンセプトに慣れ親しんでいる理由でもあります: すなわち、ブラウザーで実行可能なようにソースモジュールをクロール、処理し、連結するツールを使用しています。 時を経て webpack や Rollup、Parcel のようなツールが登場し、フロントエンド開発者の開発体験は大きく向上されました。 しかしながら、大規模なアプリケーションが作られるようになってくると、取り扱う JavaScript の量は劇的に増加しました。大規模プロジェクトでは、数千ものモジュールが含まれることも珍しくありません。JavaScript ベースのツールを使用していては、いずれパフォーマンスのボトル
React × Viteで新機能を開発した話(採用理由、実装、CI/CD)
オンライン家庭教師マナリンク CTO の名人です。 先日マナリンクでリリースした新機能でReactとViteの組み合わせを選定しました。 本記事ではReactとViteについて、以下の順で解説させていただきます。気になるところから読んでいただければ幸いです。 採用理由 実装の内容（環境設定、ライブラリ選定、コンポーネント設計など） CI/CD（デプロイ、テスティング、Linterなど） React×Viteの採用理由 マナリンクについて 採用理由を説明するにあたって、簡単にマナリンクの事業背景を説明します。 マナリンクは、オンライン家庭教師と生徒（と保護者）を繋ぐプラットフォームを運営している事業です。 大きく分けて3つの性質の違うプロダクトを開発しています。 オンライン家庭教師を集客するメディア 保護者の集客〜先生のプロフィールを比較〜問合せ〜決済までを受け持つWebサイト 宿題やチャッ
vite と single-spa で作るマイクロフロントエンド基盤
超巨大フロントエンドを分割する基盤を作ろうとしたものの紹介します。 この記事の前提 巨大フロントエンドを分割統治したい SSR は考えない モダンブラウザのみ対応する(IE11 非対応) この記事では single-spa とマイクロフロントエンドの紹介はしません。こちらの記事を読んでください。 マイクロフロントエンド入門 single-spa でマイクロフロントエンドを検証する - mizdev single-spa はアプリケーションのライフサイクルに簡単な規約を導入するもので、おそらく一番使われてるものです。これを基本的に vite と組み合わせて各アプリケーションを構成しますが、 webpack でも同様のことは可能です。 動いてるもの デモ ここで実現したこと 共通ヘッダ 異なる環境でビルドされたコンテンツをルーティングごとに切り替える react-router のアプリと vu
jQueryからTypeScript・Reactまで - Viteで始めるモダンで高速な開発環境構築 - ICS MEDIA
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.jsのツールであると誤解されることもありますが、プレーンなJavaScript（バニラJS）からVue.js・React・Svelteといった流行のフレームワークまで、さまざまな環境で利用できる汎用的なツールです。 位置付けとしてはwebpackのようなバンドラーと呼ばれるものに近い存在ですが、それだけではありません。この記事では、Viteを導入してプレーンなJavaScriptから、TypeScript+Vue.js・Reactといったフレームワークまで、快適な開発環境を手に入れる方法を紹介します。 この記事で紹介すること： Viteの特徴と基本の仕組み 基本の使い方 Vite + SCSS Vite +
Viteで爆速なフロントエンド開発環境を作る
概要 Viteというビルドツールの紹介とReact + Typescript環境からの移行手順です。 導入したプロジェクトでは開発サーバの起動からページロードまで大体40秒くらいかかっていたものが、サーバは300ms程度で起動し(2回目以降)、ページロードまで大体2~3秒ぐらいに短縮されました。 非常に開発体験が良く、導入手順もそこまで複雑ではないため、技術スタックが合えば導入を検討しても良いかもしれません。 Viteとは？ ViteはVue.js作者のEvan You 氏が開発しているノーバンドルのビルドツールです。 Native ESModulesのimportを利用し、ブラウザから直接モジュールを読み込むことで高速な開発サーバを提供します。 プロダクションビルド時はRollupでバンドルし、静的アセットを出力します。 Vue.jsだけでなく、ReactやSvelteなどもサポートされ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Migrating your React app from Webpack to Vite
What is the difference between "vite" and "vite preview"?
GitHub - IanVS/vite-plugin-turbosnap: Enables the use of Chromatic Turbosnap in vite storybook projects
GitHub - storybookjs/builder-vite: A builder plugin to run and build Storybooks with Vite
GitHub - originjs/vite-plugin-federation: Module Federation for vite & rollup
Loading...
Vitest はどれくらい早いのか ~ Jest と比較 ~
Rakkas
Native Vite Support · vercel/next.js · Discussion #22406
Vite | 次世代フロントエンドツール
GitHub - gxmari007/vite-plugin-eslint: 🚨 ESLint plugin for vite
Why Vite
GitHub - vitejs/awesome-vite: ⚡️ A curated list of awesome things related to Vite.js
