LIFF アプリを Vite 4 (React 18) で動かしてみよう
前置き
2022 年 3 月 3 日に LINE Developer コミュニティ 主催の下 React (Vite) × LIFF ハンズオンを実施いたしました。
教材は Zenn book を利用して書いています。
ハンズオンではビルドツール Vite を利用して LIFF アプリを製作しました。
今回は、正式リリースされた Vite 4 を下に、先日製作した LIFF アプリを Vite 4 上でも動作させるために、何に対して注意するべきか書かせていただきます。
Vite の 3 と 4 リリース
今年の 7 月に v3 が、また 12 月に v4 がリリースされています。
先日製作した 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 を使っています。
開発中に SWC を使用する新しい React プラグイン
@vitejs/plugin-react とは別の React プラグインとして、@vitejs/plugin-react-swc が新たに publish されています。
こちらは、ビルド時に ESBuild を使用しながら、開発時には Babel を 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 の 教材 と合わせ、いま一度ご確認いただきますと良いものと考えています。
来年 2023 年も、フロントエンドにおけるビルドツールの一角として Vite の動向を注視したいと考えています。
Discussion