Zenn
🍉

初めてWebpackからViteへ移行してみる時に役立つTips

2022/06/22に公開
TypeScript
Vue.js
Vite
tech

はじめに

最近はプロダクトでも開発環境にViteを使っているという記事などを見る事が多くなりました。

Viteではホットリロード(HMR)がめちゃくちゃ早いという事で以前から体験してみたかったのと、Vue2系でもViteを活用できる事を知り実際に試してみました。

リポジトリ

https://github.com/kawa-t/vuecli-to-vite

ブランチfeature/vuecliの構成(VueCliのパターン)

  • Vue 2.6.11（Vue3の移行がまだ済んでいないのを想定）
  • VueCli 4.5.4
  • webpack 4.12.1
  • TypeScript 4.1.5
  • CSSフレームワークにはVuetify 2.6.4
  • Node.js v16.13.0

ブランチfeature/viteの構成(VueCliのパターン)

  • Vue 2.6.11
  • Vite 2.9.12
  • TypeScript 4.1.5
  • CSSフレームワークにはVuetify 2.6.4
  • Node.js v16.13.0

なお、TypeScriptの場合だと、vue-property-decoratorやVue.extendを使ってTypeScirptを記述している事が多いので、上記リポジトリでは両方のパターンを採用して書いています。

リポジトリを持ってきて、feature/vuecliのブランチの状態でyarn installを行い、npm run serve（またはyarn serve）すると、VueCliで開発環境が立ち上がります。

試しにこの状態で、適当にCSSを変えてみると....

CSS一つ変えるだけでも反映されるのに4秒くらい掛かってます。

1回だとまだしもですが、CSS調整している時など、頻繁に画面反映している際には結構ストレスになりそうです。

この状態から、Viteに移行してきます。

Viteへの移行手順

1.Viteをインストール

yarn add --dev vite

次に、vite-plugin-vue2とunplugin-vue-componentsをインストールします。

yarn add --dev vite-plugin-vue2 unplugin-vue-components

@vitejs/plugin-vueはVue3のサポートなのでVue2の場合はインストールしなくてOKです

公式ドキュメント(引用)

@vitejs/plugin-vueは Vue 3 の単一ファイルコンポーネントのサポートを提供します。
公式ドキュメント

2.package.jsonを書き換え

  "scripts": {
-   "serve": "vue-cli-service serve",
+   "serve": "vite preview",
+   "dev": "vite",
-   "build": "vue-cli-service build",
+   "build": "vite build",
+   "build:dev": "vite build --mode development",
-   "lint": "vue-cli-service lint"
+   "lint": "eslint lint src"
  }

開発するときはdev、ビルドするときはbuild:devを使い、serveでビルドしたコードを立ち上げるようにします。

3.vite.config.tsを作成

Vue2系に合わせて、このように記載します。
また、Vuetifyを利用している場合は、pluginの部分にVuetifyResolver()を追記します。

import path from "path";
import { defineConfig } from "vite";
import { createVuePlugin as vue2 } from "vite-plugin-vue2";
import { VuetifyResolver } from "unplugin-vue-components/resolvers";
import viteComponents from "unplugin-vue-components/vite";

export default defineConfig({
  plugins: [vue2(), viteComponents({ resolvers: [VuetifyResolver()] })],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
      "./src/": path.resolve(__dirname, "./src"),
    },
  },
});

4.独自環境変数の設定

package.jsonの表記を環境を変数を利用して表示させる設定をします。

pakage.json
{
  "name": "hogehoge",
  "version": "1.1.1"
}

vite.config.ts

  • Viteで独自で環境変数を使う時はvite.config.tsに書来ます。
vite.config.ts
process.env.VITE_APP_VERSION = JSON.stringify(process.env.npm_package_version).replace('"', '');

https://ja.vitejs.dev/config/#設定ファイル

env.d.ts

  • env.d.tsに型を定義します。ない場合はルートディレクりにて作成します。
env.d.ts
interface ImportMetaEnv {
  readonly VITE_APP_VERSION: string;
}

Vue.js側

  • Viteではimport.meta.env.VITE_APP_VERSIONを記述すると環境変数にアクセスすることができます。
sample.vue
<template>
 <div>
   <span class="version"> ver.{{ version }} </span>
 </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component({
  components: {}
})
export class mixinFooter extends Vue {
  version: string = import.meta.env.VITE_APP_VERSION || '';
}
</script>

5.index.htmlを移動して修正

試しにこの状態でViteを立ち上げようとすると、下記のエラーになってしまいます。

どうやらindex.htmlファイルをルートディレクトリに持っていかないといけないみたいなので、publicにあるindex.htmlファイルを移動します。

mv public/index.html ./

index.htmlにhtmlWebpackPluginと記載されている場合は、該当のコードを削除してしまいます。

- <title><%= htmlWebpackPlugin.options.title %></title>

そして、index.htmlに次の一文を追加します。

index.html
<div id="app"></div>
<!-- 下記一文を追加してmain.tsを読み込ませる -->
<script type="module" src="/src/main.ts"></script>

ここで、コマンドラインからyarn devでViteを起動してみます。

うまく立ち上がって来たら成功です！

6.不要なファイルを削除する

webpackは不要となったため、ファイルごと削除してしまいます。

webpack.config.js
- module.exports = {
-   presets: [
-     '@vue/cli-plugin-babel/preset'
-   ]
- }

package.jsonからも削除してしまいます。

package.json
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "sass": "1.32.13",
    "sass-loader": "10.2.0",
    "typescript": "~4.1.5",
    "unplugin-vue-components": "^0.19.6",
    "vite": "^2.9.12",
    "vite-plugin-vue2": "^2.0.1",
    "vue-template-compiler": "^2.6.11",
    "vuetify": "2.6.4",
    "vuetify-loader": "1.7.3",
-   "webpack": "^4.12.1"
  },

必要に応じてbabel等も削除してスッキリさせます。

この時点でブランチfeature/viteと同じになります。

CSSなど自由に書き換えてみて、VueCliとの違いを確かめてみてください。

さいごに

実際にViteを試してみて、HMRの速さに違いに驚きました。これだけ違うとViteを採用される理由がわかる気がします。

また環境変数の読み込みなど、VueCliの時とは若干違う箇所がいくつかあるので、今後もViteを使いながら新しい開発環境にも慣れていこうと思います。

Discussion