LIFF アプリを Vite 4 (React 18) で動かしてみよう

前置き

2022 年 3 月 3 日に LINE Developer コミュニティ 主催の下 React (Vite) × LIFF ハンズオンを実施いたしました。

https://linedevelopercommunity.connpass.com/event/237619/

教材は Zenn book を利用して書いています。

https://zenn.dev/jiyuujin/books/react-x-vite-x-liff

ハンズオンではビルドツール Vite を利用して LIFF アプリを製作しました。

今回は、正式リリースされた Vite 4 を下に、先日製作した LIFF アプリを Vite 4 上でも動作させるために、何に対して注意するべきか書かせていただきます。

Vite の 3 と 4 リリース

今年の 7 月に v3 が、また 12 月に v4 がリリースされています。

https://vitejs.dev/blog/announcing-vite3.html

https://vitejs.dev/blog/announcing-vite4.html

ビルドの速度が早けりゃ、リリースのサイクルも早い！

先日製作した LIFF アプリは Zenn book の 教材 と合わせ、基本的に Vite 2 を想定しています。

ですが Vite 3 並びに Vite 4 でも問題なく動作することを確認しております。

Vite 3 で注意するべきこと

Vite 2 から Vite 3 へ移行する際は、下に示したことへ注意する必要があります。

• モダンブラウザ基準の変更
• 設定オプションの変更
• 開発サーバの変更
• glob インポートでの形式変換
• WebAssembly サポート

モダンブラウザ基準の変更

本番バンドルではモダンな JavaScript のサポートを前提としています。

Vite はデフォルトで native ES Modules および native ESM dynamic import および import.meta をサポートするブラウザを対象としています。

• Chrome >= 87
• Firefox >= 78
• Safari >= 13
• Edge >= 88

設定オプションの変更

v2 にて非推奨となっていた以下のオプションは削除されました。

• alias (resolve.alias に置き換え)
• dedupe (resolve.dedupe に置き換え)
• build.base (base に置き換え)
• build.brotliSize (build.reportCompressedSize に置き換え)
• build.cleanCssOptions (Vite は、現在では esbuild を CSS の minify に利用します)
• build.polyfillDynamicImport (dynamic import をサポートしていないブラウザのために @vitejs/plugin-legacy を利用してください)
• optimizeDeps.keepNames (optimizeDeps.esbuildOptions.keepNames に置き換え)

開発サーバの変更

Vite の開発サーバのデフォルトポートが 5173 に変更されました。

server.port を利用することで 3000 に変更できます。

glob インポートでの形式変換

glob インポートでの形式変換 は、記法が { assert: { type: 'raw' }} から { as: 'raw' } に変更されました。

// ファイル: /foo/index.js
const modules = import.meta.glob('../foo/*.js')

// 変換後
const modules = {
-  '../foo/bar.js': () => {}
+  './bar.js': () => {}
}

このように import.meta.glob は、現在のモジュールから相対的になっています。

WebAssembly サポート

import init from 'example.wasm' の記法は、WebAssembly の ES モジュール統合の提案 との将来的な衝突を避けるため、廃止されました。

実際に、以前の挙動に似た ?init を利用できます。

-import init from 'example.wasm'
+import init from 'example.wasm?init'

-init().then((instance) => {
+init().then(({ exports }) => {
  exports.test()
})

Vite 4 で注意するべきこと

Vite 3 から Vite 4 へ移行する際は、下に示したことへ注意する必要があります。

• Rollup 3 の利用
• 開発中に SWC を使用する新しい React プラグイン
• Web ブラウザの互換性
• CSS を文字列としてインポートする
• 環境変数の表記

Rollup 3 の利用

内部的に Rollup 3 を使っています。

https://github.com/rollup/rollup/releases/tag/v3.0.0

この更新に伴い、Node.js 14.18.0 が必須となっています。

開発中に SWC を使用する新しい React プラグイン

@vitejs/plugin-react とは別の React プラグインとして、@vitejs/plugin-react-swc が新たに publish されています。

こちらは、ビルド時に ESBuild を使用しながら、開発時には Babel を SWC に置き換えます。

https://github.com/vitejs/vite-plugin-react-swc

Web ブラウザの互換性

最新の Web ブラウザビルドは Safari 14 で、より広い ES2020 互換性のために、デフォルトでターゲットになりました。

CSS を文字列としてインポートする

.css デフォルトのエクスポートは非推奨になりました。この場合、インポートされたスタイル ?inline を発行しないため、クエリサフィックス修飾子を使用する必要があります。

// NG
import stuff from './global.css?inline'

// OK
import stuff from './global.css?inline'

環境変数の表記

dotenv 16 と dotenv-expand 9 (以前は dotenv 14 と dotenv-expand 5) を使用するようになりました。

新たに、引用符 " を設定する必要があります。

# NG
-VITE_APP=ab#cd`ef

# OK
+VITE_APP="ab#cd`ef"

最後に

アプリを製作する側にとって Vite の変更によって影響を受ける部分は、ソースコードを見ている限り、あまり少ないものと考えています。

なお、以下リポジトリで Vite 4 に対応しています。

Zenn book の 教材 と合わせ、いま一度ご確認いただきますと良いものと考えています。

https://github.com/jiyuujin/vite-react-liff/tree/ver.2022.4.2

来年 2023 年も、フロントエンドにおけるビルドツールの一角として Vite の動向を注視したいと考えています。