BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース 新しくリファクタリングされたVue.jsのビルダーVite 2.0は、依然としてスピードにフォーカスしており、フレームワークに依存しないようになった

新しくリファクタリングされたVue.jsのビルダーVite 2.0は、依然としてスピードにフォーカスしており、フレームワークに依存しないようになった

原文(投稿日:2021/02/24)へのリンク

Vue.jsフロントエンドフレームワークの作成者であるEvan You氏は、最近、Viteの新しいメジャーイテレーションをリリースした。これは、ビルド速度と短いフィードバックループにフォーカスしたビルドツールである。Vite 2.0は、フレームワークに依存しないコアを中心とした以前のバージョンの完全なリファクタリングである。Vite 2.0は、新しいプラグイン形式と改善されたプログラマティックAPIを備えている。これによって、Vite上に新しいツールを簡単に構築できるように取り組んでいる。

You氏は、Viteの新しいリリースについて次のように説明した。

Vite(フランス語で「速い」を意味し、/vit/と発音する)は、フロントエンドWeb開発用の新しい種類のビルドツールである。事前設定された開発サーバとバンドラーの組み合わせであるが、よりスリムで高速であることを考えてみてください。
[…] Vite 2.0は、以前のバージョンに比べて多くの大きな改善をもたらします。

Vite2.0はフレームワークに依存しなくなった。フレームワークはプラグインを介してサポートされており、その多くはすでに利用できるVue、React、PreactLitElementなど)。 Svelteプラグインは現在開発中である。

Viteには、12.0.0以降のバージョンのNode.jsが必要である。すぐに始めるためのプロジェクトのスキャフォールドは、コマンドラインから作成できる。次のコマンドは、Preactフロントエンドフレームワークを使用するViteプロジェクトを作成する。

npm init @vitejs/app my-preact-app --template preact

Vite 2.0には、Rollupのプラグインインターフェイスを拡張する新しいプラグイン形式がある。Rollup拡張機能により、Viteの新しいプラグインシステムは多くの既存のRollupプラグインと互換性を持つ。互換性のあるRollupプラグインのリストはオンラインで管理されている。このリストには、eslint(静的コード分析)、image(イメージファイルのインポート)、replace(バンドル中にファイル内の文字列を置き換える)、GraphQL(GraphQLファイルをES6モジュールに変換する)などの一般的に使用されるプラグインが含まれている。

Rollupプラグインは、一連のプロパティビルドフック出力生成フックを備えたオブジェクトである。これにより、処理の特定のポイントでバンドラーの動作が設定される。カスタムファイルタイプを変換(前処理)するVite互換のRollupプラグインは、次のように簡単である。

const fileRegex = /\.(my-file-ext)$/

export default function myPlugin() {
  return {
    name: 'transform-file',

    transform(src, id) {
      if (fileRegex.test(id)) {
        return {
          code: compileFileToJS(src),
          map: null // provide source map if available
        }
      }
    }
  }
}

Surma氏とJake Archibald氏は以前、JSConfブダペストでの講演(ビルドツールの世界で物事を高速化する)でRollupプラグインインターフェイスのシンプルさを称賛した。 Archibald氏は、多数のパフォーマンス最適化を実装できるようにした16個のカスタムRollupプラグインの功績を認めた

Webpackをたくさん蹴っているような気がするかもしれません。それは正しく、私たちはそうしています。正直なところ、Webpackを使用したプロジェクトでの作業と、Rollupを使用したプロジェクトでの作業の違いは、私たちにとって本当に、本当に、昼と夜ほど違うものでした。何が起こっているのかを理解しただけでなく、起こっていることを必要があれば変えることができると感じました。

Viteプラグインは、Rollup互換のフックのみを使用できる。また、Vite固有のフックとプロパティ(configResolvedconfigureServertransformIndexHtmlhandleHotUpdate)を利用して、Viteのみの動作(ホットモジュールの再読み込みのカスタム処理、差分ビルドなど)をカスタマイズすることもできる。

Vite 2.0は、最新のブラウザでより生産的な開発エクスペリエンスを提供するための取り組まれている新しい領域のツールに部分的に触発されている。最近リリースされたSnowpack 3は、コードベースのサイズに関係なく、ビルド時間を50ミリ秒未満と宣伝している。ストリーミングインポートも同じである。Snowpackは、Svelteの今後のアプリケーションフレームワークであるSvelteKitと、Microsite静的サイトジェネレーターで使用される。PreactのWMRは、Rollupプラグインインターフェイスを活用して、実戦でテストされた多数のRollupプラグインを再利用する先駆者である。開発者は、Vite対スノーパックとWMRの比較を参照できる。

Vite 2.0は、最上級のCSSサポート(URLリベースとCSSコード分割を含む)、サーバサイドレンダリングサポート(実験的)、オプトインのレガシーブラウザサポートも提供する。

Viteのドキュメントはオンラインで入手できる。依存関係の事前バンドル、静的アセット処理、本番バンドル、サーバ側レンダリング、バックエンド統合などをカバーしている。 ViteはMITオープンソースライセンスの下で配布されている。コントリビューションは歓迎で、その場合Viteのコントリビューションガイドに従う必要がある。

この記事に星をつける

おすすめ度
スタイル

BT