Vue CLIプロジェクトに
 Viteを導入検討してみた
 株式会社ラクス
 UI開発課
 北嶋 初音


index
 ● 自己紹介
 ● プロジェクト概要
 ● Vite
 ○ 導入モチベーション
 ○ 導入してみた
 ○ 効果
 ● まとめ


自己紹介：北嶋 初音
 ● Web業界6年目
 ● 前職ではバックエンドも触ってた
 ● 昨年1月にラクスに入ってからフロントエンド専任
 ● 新規サービスの開発に参画中
 ＋


プロジェクト概要：楽楽勤怠
 ● 2020年10月1日にリリース🥳
 ● 現在も新機能を続々追加中


プロジェクト概要：利用技術
 ● Vue CLI（4.2.3）
 ○ Vue.js（2.6.10）
 ○ TypeScript
 ○ Babel
 ○ Vuex
 ○ Vue Router
 ○ Vuetify
 ○ ESLint
 ○ Prettier


Vite：導入モチベーション
 ● ビルド速度の向上
 ○ 開発が進んで徐々に重くなってきた
 ○ デザイナーから要望が以前からあった
 ■ 手元で少しスタイル修正試したいなど
 ● Vue CLI 5でビルドにViteが選択できるようになる予定
 ○ Viteは過渡期だが、これから正式にサポートされるなら安心


Vite：導入してみた（1/10）
 ● vue-cli-plugin-vite
 ○ Vue CLIプロジェクトの開発時ビルドにViteを導入できる
 ○ コードベースに変更は必要なし
 ○ vue.config.jsは少し書き換える必要がある
 ■ Vite向け設定（vite.config.js相当）に自動で変換してくれる
 ■ Milestonesを見るとVite向け設定との対応関係が分かる


Vite：導入してみた（2/10）
 [エラー1] SCSSのグローバル変数が読めていない
 // 導入コマンド → 成功 vue add vite // 起動コマンド → 成功 yarn vite // アプリ起動時 → 失敗 11:05:22 [vite] Internal server error: Undefined mixin. ╷ 11 │ @include f-body($fontS); │ ^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/app/components/base/base-form/base-daterangepicker/_base-calendar.scss 11:9 root stylesheet

Vite：導入してみた（3/10）
 [対応1-1] SCSSのグローバル読み込みの設定追加
 const srcPath = path.resolve(__dirname, './src') module.exports = { // 変数定義ファイルをグローバルで事前読み込みしておく設定を追加 css: { loaderOptions: { scss: { additionalData: `@import "${srcPath}/styles/_variables.scss";` } } } }

Vite：導入してみた（4/10）
 [対応1-2] Viteの時だけadditionalDataを使うようにする
 
 
 const srcPath = path.resolve(__dirname, './src') const IS_VITE_ENV = process.env.npm_lifecycle_event === 'vite' module.exports = { css: { loaderOptions: { scss: { // ViteのときはadditionalData, Vue CLI のときはprependDataを使うようにする [IS_VITE_ENV ? 'additionalData' : 'prependData']: `@import "${srcPath}/styles/_variables.scss";` } } } }

Vite：導入してみた（5/10）
 [エラー2] SCSSの@のエイリアスが読めていない
 // アプリ起動時 → 失敗 (node:67126) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/hatsune.kitajima/working/timecard-frontend/@/styles/variables-sp' at Object.openSync (fs.js:465:3) at Object.readFileSync (fs.js:368:35) at rebaseUrls (/Users/hatsune.kitajima/working/timecard-frontend/node_modules/vite/dist/node/c hunks/dep-cb562f8f.js:19456:33)

Vite：導入してみた（6/10）
 [対応2(効果なし)] @のエイリアスを設定するも効果なし
 
 
 
 const srcPath = path.resolve(__dirname, './src') module.exports = { configureWebpack: { resolve: { alias: { '@': srcPath } } } }

Vite：導入してみた（7/10）
 [対応2] ~@を@に修正する
 // sass-loaderの記法?で~@としていたが、これだとViteでエイリアスが読めない（@が文字列として評 価されているっぽい？） @import '~@/styles/variables-sp'; ↓ // @に直せばViteでは読めた（ただしこの場合Vue CLIのビルドがこける） @import '@/styles/variables-sp'; ↓ // 両方の環境を動作させるには相対パスで読み込み指定するしかなさそう・・・ @import '../../styles/variables-sp';

Vite：導入してみた（8/10）
 [エラー3] Vuetifyのコンポーネントが読み込めていない
 // アプリ起動時のブラウザのコンソールエラー [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in --->

Vite：導入してみた（9/10）
 [対応3] Vuetifyの利用コンポーネントをVue.useで読み込む
 // すべて個別読み込みしていくのは辛いので、本当は一括で読み込みたい import Vuetify, { VApp, VIcon, VBtn } from 'vuetify/lib' Vue.use(Vuetify, { components: { VApp, VIcon, VBtn } })

Vite：導入してみた（10/10）
 ようやくログイン画面が表示👏
 ただし微妙なデザイン崩れがある状態。。


Vite：効果
 ● ビルドは爆速になった（10分の1以下）
 ● アプリ初回起動時の表示は遅くなった（5~6倍程度）
 ● 一度起動した後は変わらず
 ● コード編集後の画面反映が即時レベル、これは嬉しい
 → 導入できれば開発は快適になりそう！


まとめ
 ● ひとまずアプリ起動まではできた
 ● 想像より設定変更が面倒、コード変更も必要
 ● 導入には以下の壁が残っている
 ○ SCSSの~@のエイリアスが読めない
 ○ Vuetifyの利用コンポーネントを個別読み込みする必要がある
 ○ 細かいデザイン崩れがあるので当たってないスタイルがありそう
 ● 開発時ビルドは噂どおり爆速
 ● プロジェクトによっては即導入する価値はある


ラクスでは定期的にMeetupや
 勉強会を開催しています！
 ご参加お待ちしています！
 ラクス 
 中途 
 フロントエンドエンジニアも募集しています。