Vue_CLIプロジェクトにViteを導入検討してみた

Transcript

1. Vue CLIプロジェクトに

   Viteを導入検討してみた

   株式会社ラクス

   UI開発課

   北嶋 初音

   

   View Slide

2. index

   ● 自己紹介

   ● プロジェクト概要

   ● Vite

   ○ 導入モチベーション

   ○ 導入してみた

   ○ 効果

   ● まとめ

   

   View Slide

3. 自己紹介：北嶋 初音

   ● Web業界6年目

   ● 前職ではバックエンドも触ってた

   ● 昨年1月にラクスに入ってからフロントエンド専任

   ● 新規サービスの開発に参画中

   ＋

   

   View Slide

4. プロジェクト概要：楽楽勤怠

   ● 2020年10月1日にリリース🥳

   ● 現在も新機能を続々追加中

   

   View Slide

5. プロジェクト概要：利用技術

   ● Vue CLI（4.2.3）

   ○ Vue.js（2.6.10）

   ○ TypeScript

   ○ Babel

   ○ Vuex

   ○ Vue Router

   ○ Vuetify

   ○ ESLint

   ○ Prettier

   

   View Slide

6. Vite：導入モチベーション

   ● ビルド速度の向上

   ○ 開発が進んで徐々に重くなってきた

   ○ デザイナーから要望が以前からあった

   ■ 手元で少しスタイル修正試したいなど

   ● Vue CLI 5でビルドにViteが選択できるようになる予定

   ○ Viteは過渡期だが、これから正式にサポートされるなら安心

   

   View Slide

7. Vite：導入してみた（1/10）

   ● vue-cli-plugin-vite

   ○ Vue CLIプロジェクトの開発時ビルドにViteを導入できる

   ○ コードベースに変更は必要なし

   ○ vue.config.jsは少し書き換える必要がある

   ■ Vite向け設定（vite.config.js相当）に自動で変換してくれる

   ■ Milestonesを見るとVite向け設定との対応関係が分かる

   

   View Slide

8. 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
   

   View Slide

9. Vite：導入してみた（3/10）

   [対応1-1] SCSSのグローバル読み込みの設定追加

   const srcPath = path.resolve(__dirname, './src')
   module.exports = {
   // 変数定義ファイルをグローバルで事前読み込みしておく設定を追加
   css: {
   loaderOptions: {
   scss: {
   additionalData: `@import "${srcPath}/styles/_variables.scss";`
   }
   }
   }
   }
   

   View Slide

10. 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";`
    }
    }
    }
    }
    

    View Slide

11. 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)
    

    View Slide

12. Vite：導入してみた（6/10）

    [対応2(効果なし)] @のエイリアスを設定するも効果なし

    

    

    

    const srcPath = path.resolve(__dirname, './src')
    module.exports = {
    configureWebpack: {
    resolve: {
    alias: {
    '@': srcPath
    }
    }
    }
    }
    

    View Slide

13. Vite：導入してみた（7/10）

    [対応2] ~@を@に修正する

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

    View Slide

14. 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
    --->
    
    

    View Slide

15. Vite：導入してみた（9/10）

    [対応3] Vuetifyの利用コンポーネントをVue.useで読み込む

    // すべて個別読み込みしていくのは辛いので、本当は一括で読み込みたい
    import Vuetify, { VApp, VIcon, VBtn } from 'vuetify/lib'
    Vue.use(Vuetify, {
    components: { VApp, VIcon, VBtn }
    })
    

    View Slide

16. Vite：導入してみた（10/10）

    ようやくログイン画面が表示👏

    ただし微妙なデザイン崩れがある状態。。

    

    View Slide

17. Vite：効果

    ● ビルドは爆速になった（10分の1以下）

    ● アプリ初回起動時の表示は遅くなった（5~6倍程度）

    ● 一度起動した後は変わらず

    ● コード編集後の画面反映が即時レベル、これは嬉しい

    → 導入できれば開発は快適になりそう！

    

    View Slide

18. まとめ

    ● ひとまずアプリ起動まではできた

    ● 想像より設定変更が面倒、コード変更も必要

    ● 導入には以下の壁が残っている

    ○ SCSSの~@のエイリアスが読めない

    ○ Vuetifyの利用コンポーネントを個別読み込みする必要がある

    ○ 細かいデザイン崩れがあるので当たってないスタイルがありそう

    ● 開発時ビルドは噂どおり爆速

    ● プロジェクトによっては即導入する価値はある

    

    View Slide

19. ラクスでは定期的にMeetupや

    勉強会を開催しています！

    ご参加お待ちしています！

    ラクス
    

    中途
    

    フロントエンドエンジニアも募集しています。 

    

    View Slide