Counts the Clouds

ViteでtailwindcssとバニラJavaScriptの開発環境をつくる
2022.09.26

Vite
tailwindcss
JavaScript

jill-heyer-bbV7QzDUJus-unsplash.jpg

Viteが気になっていたので、静的サイト制作に使えるかどうか試してみた。

Viteプロジェクトの生成

まず、公式の「最初の vite プロジェクトを生成する」を完了させる。

% npm create vite@latest
✔ Project name: … vite-vanilla-tailwindcss
✔ Select a framework: › Vanilla
✔ Select a variant: › JavaScript

Scaffolding project in /Users/xxx/vite-vanilla-tailwindcss...

Done. Now run:

  cd vite-vanilla-tailwindcss
  npm install
  npm run dev
% cd vite-vanilla-tailwindcss

以下のような構成を得る。publicディレクトリは開発サーバーでもビルドでもルートに配置される。

% tree
.
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── package.json
├── public
│   └── vite.svg
└── style.css

1 directory, 7 files

依存関係をインストール。

% npm install

最初のテンプレートは、バニラJSでReactやVueのようなUIフレームワーク風にDOMを構築するようなコードになっている。これを普通の静的サイトをコーディングするような形に変更する。

つまり、DOMはすべてHTMLファイルに寄せ、CSSとJavaSCriptをそれぞれ別にバンドルする。

せっかくなので、jQueryぐらいは入れておく。

% npm install jquery

変更後のindex.htmlは以下の通り。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <link rel="stylesheet" href="/style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app">
      <a href="https://vitejs.dev" target="_blank">
        <img src="/vite.svg" class="logo" alt="Vite logo" />
      </a>
      <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
        <img src="/javascript.svg" class="logo vanilla" alt="JavaScript logo" />
      </a>
      <h1>Hello Vite!</h1>
      <div class="card">
        <button id="counter" type="button"></button>
      </div>
      <p class="read-the-docs">Click on the Vite logo to learn more</p>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

JavaScript のソースコードを参照している <script type="module" src="..."> を解決します。インラインの <script type="module"> や <link href> で参照される CSS も Vite 固有の機能を利用できます。

なんでも自動的に行われるので魔法のようで少し理解しにくい。Viteで処理すべきCSSやJavaScriptの存在は自動的に判定しているようだ。

今回のようにCSSファイルだけ書き出したいとき、Webpackであればmini-css-extract-pluginなどを利用するところだが、それに比べるとかなり簡単。

main.jsは以下の通り。適当。

import $ from 'jquery';

function main() {
  let counter = 0;
  const $button = $('#counter').text(`count is ${counter}`);
  $button.on('click', () => {
    $button.text(`count is ${++counter}`);
  });
}

main();

画面の表示が変わっていないことと、HMRが効いていてスタイルを変更すると即時に反映されることを確認。

スクリーンショット1

tailwindcssの導入

https://tailwindcss.com/docs/installation/using-postcss

% npm install -D tailwindcss postcss autoprefixer
% npx tailwindcss init
Created Tailwind CSS config file: tailwind.config.cjs

tailwind.config.cjsにエントリーポイントを指定。JavaScriptでスタイルを扱うことは今回はないのでHTMLファイルだけ指定。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html'],
  theme: {
    extend: {},
  },
  plugins: [],
};

style.cssにtailwindcssのディレクティブを追加。Preflightを適用するとロゴの部分が崩れてしまうので今回は外した。

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

これだけだとtailwindcssは動かないので、さらにpostcss.config.jsを追加。PostCSSの項目には以下のように書いてある。

もしプロジェクトに有効な PostCSS が含まれている場合 (postcss-load-config でサポートされている任意の形式、例: postcss.config.js)、インポートされたすべての CSS に自動的に適用されます。

tailwindcssは自動的に適用されるPostCSS経由で動いているようだ。

% touch postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

tailwindcssのクラスが使えるようになった。

      <h1 class="text-6xl font-thin italic">Hello Vite!</h1>

スクリーンショット2

% npm run build

> vite-vanilla-tailwindcss@0.0.0 build /Users/xxx/vite-vanilla-tailwindcss
> vite build

vite v3.1.1 building for production...
✓ 7 modules transformed.
dist/index.html                  0.96 KiB
dist/assets/index.f2b9936c.css   1.29 KiB / gzip: 0.65 KiB
dist/assets/index.dd654aa2.js    89.28 KiB / gzip: 31.84 KiB
% npm run preview

> vite-vanilla-tailwindcss@0.0.0 preview /Users/xxx/vite-vanilla-tailwindcss
> vite preview

  ➜  Local:   http://127.0.0.1:4173/
  ➜  Network: use --host to expose

ビルドタイムでも同じ結果であることを確認。

Viteを使ってtailwindcssとバニラJavaScriptの環境を構築することができた。