Viteでレガシー(IE11)の変換をしてみる

おはようございます。としあきです。

JavascriptのビルドツールであるViteを使ってみました。

ファーストインプレッションです。

従来のビルドツールで、webpack, parcel等を使ってみましたが、最新版でIE11に対応するのが非常に難しいです。どうしても一部ES6以上のコードが残ってしまいます。

ViteではIE11対応もできるらしいので試しました。

Viteとは

Vue.jsの作者であるEvan Youが開発したもので、従来のビルドツールより高速にビルドできるとのことです。

Vueに限らず、Vanilla.js、React、Preact、Typescriptなど使えます。

インストール

プロジェクトを作成したいディレクトリから、下記コマンドを実行します。

yarn create vite
...
success Installed "create-vite@2.5.4" with binaries:
      - create-vite
      - cva
? Project name: › vite-project

プロジェクト名を入力します。

Select a framework: › - Use arrow-keys. Return to submit.
		vanilla
    vue
❯   react
    preact
    lit-element
    svelte

フレームワークを選択します。今回はReactで作成します。

Select a framework: › react
? Select a variant: › - Use arrow-keys. Return to submit.
		react
❯   react-ts

これでプロジェクトが作成されました。

cd vite-project
yarn

開発環境の実行

yarn dev

これでデフォルトでは3000ポートでブラウザで動作確認できます。

<http://localhost:3000/>

ビルド

yarn build

これでdistディレクトリに生成されたコードが出力されます。

sassの使用

以下のコマンドを実行すれば環境が用意されます。

yarn add --dev sass

あとは.scssファイルを作成してimportすれば使用できます。

開発環境のポート変更

色んなポート番号で開発するのはややこしいのでポート番号を指定して実行したい。そんな場合、以下の設定を行います。

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  server: {
    port: 8080
  },
})

アセットのフォルダ指定

ビルドしたデフォルトだと、生成されたHTMLからJSなどへのリンクはルートからの絶対パスになっています。

/assets/….js など

実行環境ではサブディレクトリから実行することもあるので以下の指定を行います。

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  base: './',
})

レガシーへの対応

標準ではIE11などの古いブラウザに対応していません。

以下の指定を行うことでビルド結果がIE11でも動作可能なものに変換されます。

(全てのコード、ライブラリを必ず変換できるものではないため、事前に確認した方が良いです)

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import legacy from '@vitejs/plugin-legacy'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
})

プラグインをインストールしておきます。

yarn add --dev @vitejs/plugin-legacy

まとめ

ここまでの設定をまとめたファイルは下記の内容になります。

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import legacy from '@vitejs/plugin-legacy'

// <https://vitejs.dev/config/>
export default defineConfig({
  plugins: [reactRefresh(),
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  server: {
    port: 8080
  },
  base: './',
})

とても高速にコンパイルできてIE11も対応できそうです。

Close Bitnami banner
Bitnami