【Vite】 Vue3.0もReactも！ノーバンドルなビルドツール「Vite」を試してみる

10875 ワード
rollup.js vite JavaScript TypeScript Vue.js JavaScript テキストリンク

最近猛烈にスターを集めているビルドツール、Viteを触ってみたので簡単に紹介します。
この記事はVite v0.19.1時点での情報です。

Viteとは？

ViteはVue.jsの作者のEvan You氏が開発中のノーバンドルなビルドツールです。
ネイティブのESモジュールのインポートを利用しバンドル不要で高速に動作するdevサーバーと、Rollup.jsをベースとしたプロダクションビルド機能を提供します。
設定不要で.vueのSFC（Single File Components）をコンパイルできて、さらにデフォルトで今開発中のVue3.0が使えます。
しかも、vue-cliのようにVue.js限定ではなく、React、Preactにも対応しています。

注意

Still experimental, but we intend to make it suitable for production.

とある通り、まだ絶賛開発中です。プロダクションで使うのは控えた方が良さそうです。

何が嬉しいの？

SFCでの開発ならVue CLIやWebpackで良いのでは?と思うかもしれません。
Viteを使う利点は以下の通りです。

  • 開発時はバンドル不要で動作するので、大規模プロジェクトでも初回起動が非常に早い
  • HMR（画面の再描画無しにファイル変更をブラウザに適用してくれる機能）が、モジュールの総数と切り離されているため一貫して高速に動作する

ざっくり言うと総じて動作が早いです。開発体験が良い。
他詳細な説明はREADMEにも記載されているのでそちらもどうぞ。

インストールとプロジェクト作成

VueとReactのプロジェクト作成を簡単に説明します。

Vue

以下コマンドでプロジェクトを作成します。

$ npm init vite-app example-vue

これだけでOKです。example-vueにVueのプロジェクトが作成されます。
あとは依存モジュールをinstallして起動するだけです。

$ cd example-vue
$ npm i
$ npm run dev

React

--template reactでReactのテンプレートを指定したうえでプロジェクトを作成します。

$ npm init vite-app --template react example-react

example-reactにReactのプロジェクトが作成されます。
あとはvueと同じく起動するだけです。

$ cd example-react
$ npm i
$ npm run dev

ビルド

ViteではRollup.jsを内部的に使ってリソースをバンドルしプロダクションビルドが可能です。
buildコマンドでビルドが実行されます。

$ npm run build

dist配下に成果物が生成されるので、あとはそれを公開するだけです。

細かいビルドオプションを設定したい場合は、コマンド引数で指定するか、設定ファイルを作り記述できます。
以下成果物のディレクトリをoutディレクトリに変更する例です。

プロジェクトルートにvite.config.jsを追加して以下を記述します。

vite.config.js
module.exports = {
  outDir: "out"
}

あとはそのままビルドすればoutディレクトリに成果物が生成されます。

他設定可能なオプションはソースコードをみるのが良さそうです。
https://github.com/vitejs/vite/blob/master/src/node/config.ts

TypeScriptへの対応

TypeScriptへの対応も設定なしで可能です。Vueの場合は.vueで<script lang="ts">を設定するだけ。
Reactの場合は、.jsxを.tsxに変更するだけです。
.tsファイルもそのままimportできます。

App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue + Vite" />
</template>

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { defineComponent } from 'vue'

// Composition APIなので defineComponent()を利用
export default defineComponent({
  name: 'App',
  components: {
    HelloWorld
  },
  setup() {
    return {}
  }
})
</script>

注意点
2020/05/31現在、TypeScriptはJSへのトランスパイルのみ対応していて、型チェックは行えません。
基本的にエディタ上での型エラーの確認と、tsconfig.jsonを追加しビルド前にtsc --noEmitを利用して型チェックを行ってください。

PostCSS、Scssへの対応

Viteは、.vueファイルとインポートされた.cssファイルの全てにPostCSSを自動的に適用します。
必要なPostCSSのプラグインをnpmでインストールして、あとはpostcss.config.jsをプロジェクトルートに追加するだけです。

Autoprefixerの利用例。

$ npm i autoprefixer --save-dev
postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')()
  ]
}

CSS Pre-Processorsのscssも、sassをnpmインストールして、.vueファイルで<style lang="scss">を指定するだけで利用できます。

$ npm i sass --save-dev

<style lang="scss">
/* scss */
</style>

終わりに

とても高速に動作するのでViteかなり良いですね。あと、Vue 3.0のsandbox環境としても最高です。
今回紹介した以外にも機能盛り沢山なので、是非READMEを読んで欲しいです。
https://github.com/vitejs/vite

今後もさらに機能が拡張されるようなので引き続き動向を見ていきたいです。

最後に。Evan You氏のVite作成時の投稿がカッコ良すぎる。
こんなこといつか言ってみたいです。

参考