ファイル構成

開発ファイル

📂 __assets/
├── 📂 htdocs/
│   └── 📂 js/
│       └── script.ts
└── 📂 _libs/
    └── 📂 script/
        ├── sub-script.ts
        └── sub-script2.js

type=moduleの環境であるため、ファイルの参照に拡張子は必須です。TypeScriptファイルを参照する際は.ts拡張子を.jsに変更する必要があります。

__assets/_libsはエイリアス@で参照できるようになっています。

import { subScript } from '@/script/sub-script.js';

エイリアスの変更

エイリアスは変更可能または追加することができます。tsconfig.jsonのpathsと、eleventy.config.cjsのaliasを変更してください。

{
	"compilerOptions": {
		"paths": {
			"@/*": ["./__assets/_libs/*"]
		}
	}
}

import path from 'node:path';
import eleventy from '@d-zero/builder/11ty';

export default function (eleventyConfig) {
	return eleventy(eleventyConfig, {
		alias: {
			'@': path.resolve(import.meta.dirname, '__assets', '_libs'),
		},
	});
}

このaliasはesbuildの設定に影響します。

公開ファイル

__assets/htdocs/配下のファイルがビルドされてhtdocs/に出力されます。パス構造は維持されます。

📂 __assets/
├── 📂 htdocs/
│   └── 📂 js/
│       ├── script.ts
│       └── sub-script.ts
📂 htdocs/
└── 📂 js/
    ├── script.js
    └── sub-script.js