Vuetify、Webpack から Vite へ

Dec 08 2022

Vue2 with Vuetify プロジェクトを Webpack から Vite に移行する方法のステップバイステップガイド

Vue2 で記述された多くのレガシープロジェクトがあります。そして、私が使用するスタイルライブラリは何ですか? もちろんVuetify。

この記事は、Vite のパワーを活用できるように設計されています。レガシコードを使用している場合でも、開発時間を短縮する必要があるからです。

古いブラウザをサポートする必要がない場合。開発ビルドをスピードアップしたい場合。全体的により良い体験が必要な場合。Vite をご覧になることをお勧めします。

Vite は Webpack と同様の機能を備えています。単一ファイルコンポーネントと Typescript からバニラ JavaScript まで、コードをバンドルしてコンパイルします。

それが同じなら、なぜ私はそれを使いたいのですか？

単純。Vite によって生成されるバンドルは小さくなります。実際には、これは次の 2 つのことを意味します。

開発スピードが速い。より少ないコードを生成する必要があるため、トランスパイルが高速になります。
ブラウザの読み込み速度が速くなります。バンドルが小さいほど、読み込みが速くなります。

免責事項

Vite に飛び込む前に。古いブラウザをサポートしていないことを知っておく必要があります。

バベルを取り除く

package.jsonで、次のようにすべてのバベル関連を削除します。

"@babel/core": "...",
"@babel/eslint-parser": "...",
"@vue/cli-plugin-babel": "...",

完了したら、Webpack 関連のライブラリを削除しましょう。

Webpack の削除

package.jsonで以下を削除します。

"@vue/cli-plugin-eslint": "...",
"@vue/cli-plugin-router": "...",
"@vue/cli-plugin-unit-jest": "...",
"@vue/cli-plugin-vuex": "...",
"@vue/cli-service": "...",

Webpack と Babel が削除されました。今。Viteを追加しましょう。

バイトの追加

以下を実行してインストールviteします。vite-plugin-vue2

npm install -D vite vite-plugin-vue2

ファイルの並べ替え

Vite は、私たちのプロジェクトのファイル構造に少しこだわりがあります。静的ファイルのディレクトリを変更する必要があります。

パブリックフォルダーにあったすべてのものを、ルートディレクトリに取り出します。

私が通常言及している「すべて」とは、次のようなものです。

index.html
favicon.ico

index.html ファイルへの変更

index.htmlを開くと、次のような内容が表示されます。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

言い換えると。すべてが<%...%>行く必要があります。

それが完了すると、次のようになります。

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="./favicon.ico" />
    <title>Admin</title>
    <script type="module" src="/src/main.js" defer></script>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but the admin doesn't work properly without JavaScript
        enabled. Please enable it to continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

<script type="module" src="/src/main.js" defer></script>

Vite 構成の追加

Webpack に構成を追加する方法と同様に、Vite でそれを行う必要があります。

簡単な設定ファイル:

import { defineConfig } from "vite";
import { createVuePlugin as vue } from "vite-plugin-vue2";
import path from "path";

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

初め。必要な依存関係をインポートします。

import { defineConfig } from "vite"

import { createVuePlugin as vue } from "vite-plugin-vue2";

import path from "path";

今から難しいものに。

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(path.dirname(''), "./src"),
    },
  },
});

plugins: [vue()],

resolve: {
  alias: {
    "@": path.resolve(path.dirname(''), "./src"),
  },
},

Vite スクリプトを追加する

また、スクリプトを更新する必要があります。これから：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint"
},

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src"
},

これまでの構成は Vuetify では機能しません。これを行うには、いくつかの特別な調整が必要です。

追加のステップ

今後。単一ファイルコンポーネント (SFC) をインポートするときは常に、拡張子を含める必要があります。

これを行う前に：

import HelloWorld from '@/components/HelloWorld';

import HelloWorld from '@/components/HelloWorld.vue';

Eslint が Vite で正しく動作するには、いくつかの設定を調整する必要があります。使用しない場合は、このセクションにジャンプしてください。