CSS・JS・TSのエントリー

HTMLから参照するCSS・JavaScript・TypeScriptを、ビルドの入口（エントリー）として指定できます。pluginSsg()がファイルを処理して参照URLを更新するため、旧pluginEntry()は不要です。

ここではトップページに、ボタンを押すと挨拶を表示する通常のJavaScriptを追加します。Reactの状態を使うUIはIslandで扱います。

ブラウザ用のコードを作る

src/assets/scripts.tsを作ります。このファイルはブラウザで実行されるため、documentやwindowを利用できます。

src/assets/scripts.ts

document.querySelector("[data-greeting]")?.addEventListener("click", () => {
  window.alert("こんにちは！")
})

TypeScriptを使わない場合は同じ内容をscripts.jsへ書けます。ブラウザの処理は、静的HTMLを生成するページやレイアウトのトップレベルへ置かず、このファイルへ分けます。

HTMLからエントリーを指定する

CSSはlink、JavaScript・TypeScriptはscriptで参照します。ここで使うglobals.cssはCSSのバンドルで作成したファイルです。

src/pages/index.tsx

import { Head } from "minista/head"

export default function Page() {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="/src/layouts/globals.css" />
        <script type="module" src="/src/assets/scripts.ts" />
      </Head>
      <h1>My Site</h1>
      <button type="button" data-greeting>
        挨拶する
      </button>
    </>
  )
}

CSSをこの方法で指定する場合は、同じファイルのimportを外して二重読み込みを避けます。全ページ共通のエントリーなら、参照をレイアウトへ移します。

ビルド結果を確認する

プロジェクト構成

src/
├── assets/
│   └── scripts.ts
├── layouts/
│   ├── globals.css
│   └── index.tsx
└── pages/
    └── index.tsx

ビルド結果の例

dist/
├── index.html
└── assets/
    ├── globals-[hash].css
    └── scripts-[hash].js

TypeScriptはJavaScriptへ変換されます。HTML内の参照も出力先へ書き換わるため、公開先へsrc/をアップロードする必要はありません。ファイル名や分割結果は設定と依存関係によって変わります。

JavaScriptからCSSを読み込む

エントリーからCSSをimportすることもできます。

src/assets/scripts.ts

import "../layouts/globals.css"

document.querySelector("[data-greeting]")?.addEventListener("click", () => {
  window.alert("こんにちは！")
})

この方法ではページのlinkを外します。ビルド時に、このscriptを参照するページへstylesheetが追加されます。別のページでもスタイルを使うなら、そのページや共通レイアウトから読み込んでください。

publicのコードを併用する

既存のCSSやJavaScriptを無加工で使う場合は、public/へ置きます。

<Head>
  <link rel="stylesheet" href="/css/legacy.css" />
  <script src="/js/legacy.js" defer />
</Head>

この例はpublic/css/legacy.cssとpublic/js/legacy.jsを参照します。ソースのエントリーとpublicのファイルは同じページで併用できます。

処理対象は/から始まり、プロジェクト内に実ファイルがある参照です。外部URLやHTML内の./から始まる相対URLは変更しません。

対象属性などの詳細はpluginSsgを参照してください。

次は画像最適化で、プラグインを追加して画像のサイズと形式を調整します。

前のページCSSのバンドル