Open1

Astro - 覚書

RikuRiku

Script を扱う際の挙動について

Astro で Scriptを扱うときに、ビルド後の挙動にクセがある。

Scriptが 直接HTMLに差し込まれるケース

  • ページを跨がずに単一のページで処理する場合は、
    コンパイルされたソースがビルド後のHTMLに直接挿入される。

// page.astro
---
...
---

<Layout>
  <main>
    <h1>Astro サイトテンプレートです</h1>
  </main>
</Layout>

<script>
  import { Top } from './Top';
  Top();
</script>

ファイル生成されるケース

  • 処理が複数ページにまたがって実行する場合は、
    それぞれページごとに分かれたJSファイル と それ以外の処理がファイルに分かれて生成される。

さらに 下記のように Astro に直接スクリプトを書く方法と、
それぞれのスクリプトで 処理を import して実行する方法 とでは、生成後のファイル形式が異なる。

  1. astroコンポーネントに書いたとき
// Layout.astro
---
...
---

<!doctype html>
<html lang="ja">
  <head>
...
  </head>
  <body>
    <slot />
    <script>
      console.log('Layoutです'); // 共通で実行
    </script>
  </body>
</html>

-> ファイル名.astro_astro_type_script_index_0_lang.ハッシュ名.js
のようなファイル名で生成されるが、

  1. スクリプトファイルでimport した場合、
import { Common } from "@/scripts/common";

export function Top() {
	Common();
	console.log("huga");
	return 2;
}

-> ファイル名.ハッシュ名.js で生成される。

直接インラインで埋め込むかファイル別に生成する方法の制御方法は不明。

可能であればあらゆる納品形式に対応できるようこちらの制御ができればいいが、
実行する場所で動きにクセがあるので要注意。

（とはいえビルド後のファイルについて気にしないといけない場合に限るが）