# [Rollup]
buildStart() フックにて、アセットを配置する


published: 2024-11-23

## 構成

・SvelteKit で SSG
・コンテンツを /data というディレクトリに置いている


```bash
├─ src
│   └─ routes
│       ├─ +page.server.ts
│       └─ +page.svelte
└─ data // コンテンツ

```

## 悩み

記事データは +page.server.ts の load() で読み込めば良いが、アセットはどうしようか。


```bash
├─ src
│   └─ routes
│       ├─ +page.server.ts // 記事データ読み込み
│       └─ +page.svelte
└─ data
    ├─ article.md // 記事データ
    └─ image.png  // アセット (主に画像ファイル) // どうしようか

```

## 結論

Rollup の buildStart() フックにて、アセットを /static へ配置する


## Rollup の buildStart() フック

Rollup にはフックがいくつかある
・buildStart
・buildEnd
・options

buildStart() はその名の通り、ビルド開始時に呼ばれる様子。ドキュメントのフロー図が分かりやすかった


- [ドキュメント](https://rollupjs.org/plugin-development/#build-hooks)
## コード

### `data/something-image-file.png`

```png

```

### `static/robots.txt`

```txt
User-agent: *
Allow: /

```

### `package.json`

```json
{
	"type": "module",
	"private": true,
	"scripts": {
		"dev": "vite dev",
		"build": "vite build"
	},
	"devDependencies": {
		"@sveltejs/adapter-static": "^3.0.6",
		"@sveltejs/kit": "^2.8.1",
		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
		"svelte": "5.0.0-next.262",
		"typescript": "^5.6.3",
		"vite": "^5.4.11"
	}
}
```

### `.gitignore`

```gitignore
# ビルド時に画像ファイルを配置する
/static/images

```

### `vite.config.ts`

```ts
import { defineConfig } from 'vite'
import { sveltekit } from '@sveltejs/kit/vite'
import path from 'node:path'
import fs from 'node:fs/promises'

export default defineConfig({
	plugins: [
		sveltekit(),

		// 追加したコード
		{
			name: 'file-copy',

			// buildStart にて呼ばれる
			// see https://rollupjs.org/plugin-development/#buildstart
			async buildStart() {

				// 画像ファイルの格納先ディレクトリを作成
				try {
					// remove old assets
					await fs.rm('./static/images', { recursive: true })
					await fs.mkdir('./static/images', { recursive: true })
				} catch(e) {}

				// 画像ファイルを配置
				const src = path.join('./data', 'something-image-file.png')
				const dest = path.join('./static/images', 'something-image-file.png')
				await fs.copyFile(src, dest)

				console.log('file copied!')
			},
		},
	],
})

```

### memos

- [ドキュメント](https://rollupjs.org/plugin-development/#buildstart)
## 実行結果

ビルドすると file copied! という文字列が出力される。
うまく呼ばれてそう。


```bash
$ pnpm build
> vite build

vite v5.4.11 building SSR bundle for production...
file copied!
✓ 1918 modules transformed.

```