v3.1.7

Dynamic Entry

Head やページ内に必要な CSS・JS へのプロジェクトルートパスを貼ると、本番ではそれぞれをビルドしつつ個別のファイルとして出力できます。 

import { Head } from "minista"

export default function () {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="/src/assets/entry.css" />
        <link rel="stylesheet" href="/src/assets/entry2.css" />
        <script type="module" src="/src/assets/entry.ts" />
      </Head>
      <script type="module" src="/src/assets/entry2.ts" />
    </>
  )
}

└── dist
    └── assets
        ├── entry.css
        ├── entry2.css
        ├── entry.js
        └── entry2.js

Entry Name

出力するファイル名は自動的にエントリーファイルを継承しますが data-minista-entry-name 属性を付与することで任意の名称に変更できます。data-minista-entry-name 属性は削除されるためコードは汚れません。

import { Head } from "minista"

export default function () {
  return (
    <>
      <Head>
        <link
          rel="stylesheet"
          href="/src/assets/entry.css"
          data-minista-entry-name="test/custom"
        />
      </Head>
    </>
  )
}

└── dist
    └── assets
        └── test
            └── custom.css