Webエンジニア（コーダー）向けVite環境の紹介【初心者向け解説】

こんにちは！のせっち@nosecchi01です。

最近流行りのViteを導入し、Web制作に使える環境構築をしていきます。

Viteはとにかくコンパイルの早さが売りのようです。(vite:ヴィットはフランス語で早い）
この辺はまだ中・大規模な案件で使用していないのでわからないですが、Gulpではjsのバンドルで特に時間がかかる印象がありますが、Viteは爆速なので期待できます。

今回は、Webエンジニア（コーダー）がViteを使うための設定を解説していきます。

  • Sassのコンパイル
  • jsのバンドル
  • ES5トランスパイル（IE11対応）

この辺りを設定していきます。

簡単すぎてビックリします。

それでは行ってみましょう！

当記事はICS MEDIAさんの記事を大いに参考にした、コーダー向けのカスタマイズ記事です。
基本的な設定は大部分を踏襲しています。

jQueryからTypeScript・Reactまで – Viteで始めるモダンで高速な開発環境構築
Vite（ヴィート＝フランス語で「速い」の意味）は2020年に発表された新しいフロントエンドのビルドツールです。 開発者がVue.jsの作者であるEvan You氏であるため、Vue.js…
ics.media

Viteでプロジェクトを作成

ターミナルで下記のコマンドを実行します。

（テストで作ってみる場合は cd Desktop でターミナルに移動しておくといいです。）

npm init @vitejs/app

フレームワークは全て無しで、vanillaを選択します。

Project name: › vite-sample
Select a framework: › - Use arrow-keys. Return to submit.
❯   vanilla
    vue
    react
    preact
    lit-element
    svelte
? Select a variant: › - Use arrow-keys. Return to submit.
❯   vanilla
    vanilla-ts

ここまで進むと下記のメッセージが出てくるので、言われた通りにします。

cd vite-sample ## ご自身で設定したプロジェクト名
npm install
npm run dev

これでローカルサーバーが起動します。

この状態で既にローカルサーバーとライブリロードは設定されていることが確認できます。

Sassの設定をする

Sassの設定をしていきます。めちゃくちゃ簡単です。
まずは、パッケージをインストールします。

npm i -D sass

後はファイル名を変更するだけです。

  • style.cssをstyle.scssにリネーム
  • main.jsの import './style.css'をimport './style.scss'に変更

これでSassが使えます。

Viteは標準でSassを認識してくれるのでファイル名を変更するだけでOKです。

Viteではcssをjsにimportする形になっています。
これでもいいのですが、コーダー的にはjsはjs、cssはcssで管理したいと思うので、下記のように変更しましょう。

// import './style.scss' 削除
<!-- 追加 -->
<link rel="stylesheet" href="./style.scss">

ちなみに、ファイル構成を変えても自動で追いかけてくれます。
src/scss/style.scssとかに変えても、index.htmlのパスを合わせるだけでOKです。

ビルドしてみる

下記のコマンドでビルドすることができます。

npm run build

そうすると、distフォルダが作成され、納品用のファイル群が出来上がります。

css, js, imgなどにはキャッシュ情報が付くため、変更があれば自動でキャッシュクリアされる仕組みになっています。

dist/index.html キャッシュ情報が付いている。

設定のカスタマイズ

上記のままでも十分使えそうですが、少しカスタマイズしたいのでvite.config.jsを作成していきます。

下記の設定をしていきます。

  • port番号を指定する
  • IE11対応
  • autoprefixerの導入
  • 画像圧縮の自動化

ルートディレクトリにvite.config.jsを作成して下記を記述します。

import { defineConfig } from 'vite'
export default defineConfig({
  base: './'  // 相対パスを指定する。デプロイ先がルートでない場合にも対応
})

既に一つbase:'./'というのが書かれていますが、これはお作法的に書いておきます。これはアップロード先がサブディレクトリの場合でもパスが合うように設定しています。

「ローカル環境では問題なかったのに、パスが合わないのなんで？！」となる自体を避けるためにデフォルトで書いておくといいです。

port番号を指定する

デフォルトだとlocalhost:3000になるのでport番号を指定します。

import { defineConfig } from 'vite'
export default defineConfig({
  base: './',
  server: {
    port: 8888 // 任意のポート番号を書く
  }
})

IE11対応

jsのES5対応をするために下記のプラグインを入れていきます。

npm install -D @vitejs/plugin-legacy

続いてvite.config.jsの設定追加です。

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy' // 追加

export default defineConfig({
  base: './',
  server: {
    port: 8888
  },
  // 追加
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
})

これでjsのIE11対応ができます。

autoprefixerの導入

autoprefixerはcssに自動で-webkit-などのベンダープレフィックスを自動で付与してくれるものです。

まずはパッケージをインストールします。

npm i -D postcss autoprefixer

次に、ルートディレクトリにpostcss.config.jsを作成し、以下を記述します。

module.exports = {
  plugins: {
    autoprefixer: { grid: "autoplace" },
  },
}

更に細かい設定をしたい方はルートディレクトリに.browserslistrcを作成しましょう。下記は一例です。

last 1 version
> 1%
IE 11

.browserslistrcをカスタマイズしたい場合は、下記の記事が参考になります。

.browserslistrcで対象ブラウザを指定する – Qiita
.browserslistrcは、「AutoprefixerでCSSにどのベンダープレフィックスを付けるか」などを決める設定ファイルです。Autoprefixer以外にも対応していてツールごとに設定を…
qiita.com

画像圧縮の自動化

画像圧縮の自動化をしていきます。

普段僕はビルドツール系で画像圧縮はやっておらず、imageOptimを使っていますが、とても設定が簡単だったので紹介します。

まずパッケージをインストールします。

npm i -D vite-plugin-imagemin

次に、vite.config.jsを編集します。

import { defineConfig } from 'vite'
import legacy from '@vitejs/plugin-legacy'
import viteImagemin from 'vite-plugin-imagemin'; // 追加

export default defineConfig({
  base: './',
  server: {
    port: 8888
  },
  plugins: [
    legacy({
      targets: ['ie >= 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    }),
  // 追加
  viteImagemin({
      gifsicle: {
        optimizationLevel: 7,
        interlaced: false,
      },
      optipng: {
        optimizationLevel: 7,
      },
      mozjpeg: {
        quality: 20,
      },
      pngquant: {
        quality: [0.8, 0.9],
        speed: 4,
      },
      svgo: {
        plugins: [
          {
            name: 'removeViewBox',
          },
          {
            name: 'removeEmptyAttrs',
            active: false,
          },
        ],
      },
    }),
  ],
})

圧縮されるのはnpm run buildした後のファイルのみです。

ビルド前の画像が残るので、圧縮しすぎたかな…となった場合でも書き出し直す必要がないですね。

その代わり、圧縮前の画像が残ってしまうので容量を圧迫しますね…。

おまけ：pug単体では使えない【悲報】

vite-plugin-pugというプラグインがありますが、現状こちらは使い物になりませんでした。

僕が発見した問題点(2021.7時点）

  • index.pugをセーブしてもコンパイルが走らない（index.htmlをセーブしないといけない）
  • 画像のパスが合わない

僕が少し使ってみた限りでも上記の不具合を発見しました。致命的すぎるので現時点では単体では使えないかな、といった感じ。

単体では使えないと書いたのは、Vueであれば <template lang="pug"></template>で使えそうだからです。html側でもモジュール管理をしたい場合はおとなしくVueやReactを使った方が良さそうです。

まとめ

Viteを使えば簡単にWeb制作に必要な環境構築をすることができます。（しかも高速）

この記事を書いた人

のせっち

福岡県出身。早稲田大学卒。創業100年の鉄鋼商社でバンコク駐在最年少抜擢。毎日擦り切れるまで働かなくても幸せに生きている人々を見てフリーランスになりました。
- WordPressが得意！
- 初心者向けGulp教材は購入者100部以上！

記事一覧