Skip to content

feat(html)!: support more asset sources #1687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 4, 2024
Merged

feat(html)!: support more asset sources #1687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
234d7e7
feat(html)!: support more asset sources
jay-es Nov 4, 2024
615cb87
docs(migration): add section for html asset sources
jay-es Nov 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions guide/features.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,17 +170,32 @@ HTML ファイルは、Vite プロジェクトの[中心](/guide/#index-html-and
- `<root>/about.html` -> `http://localhost:5173/about.html`
- `<root>/blog/index.html` -> `http://localhost:5173/blog/index.html`

デフォルトでは、`<script type="module">` や `<link href>` タグなどの HTML 要素が処理され、リンクされたファイルで Vite の機能を使用できるようになります。また、`<img src>`、`<video src>`、`<source src>` などの一般的なアセット要素もリベースされ、最適化され、正しいパスにリンクされるようになります。

```html
`<script type="module" src>` や `<link href>` などの HTML 要素によって参照されるアセットは、アプリの一部として処理され、バンドルされます。サポートされている要素の完全なリストは次のとおりです:

- `<audio src>`
- `<embed src>`
- `<img src>` と `<img srcset>`
- `<image src>`
- `<input src>`
- `<link href>` と `<link imagesrcet>`
- `<object data>`
- `<script type="module" src>`
- `<source src>` と `<source srcset>`
- `<track src>`
- `<use href>` と `<use xlink:href>`
- `<video src>` と `<video poster>`
- `<meta content>`
- `name` 属性が `msapplication-tileimage`、`msapplication-square70x70logo`、`msapplication-square150x150logo`、`msapplication-wide310x150logo`、`msapplication-square310x310logo`、`msapplication-config`、`twitter:image` に一致する場合のみ
- または、`property` 属性が `og:image`、`og:image:url`、`og:image:secure_url`、`og:audio`、`og:audio:secure_url`、`og:video`、`og:video:secure_url` に一致する場合のみ

```html {4-5,8-9}
<!doctype html>
<html>
<head>
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="/src/styles.css" />
</head>
<body>
<div id="app"></div>
<img src="/src/images/logo.svg" alt="logo" />
<script type="module" src="/src/main.js"></script>
</body>
Expand Down
8 changes: 8 additions & 0 deletions guide/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,14 @@ Vite 6 からは、`json.stringify: true` が設定されていても、`json.na

Vite 6 では、`json.stringify` の新しいデフォルト値として `'auto'` が導入されました。これは、大きな JSON ファイルのみを文字列化します。この動作を無効にするには、`json.stringify: false` を設定します。

### HTML 要素におけるアセット参照の拡張サポート

Vite 5 では、サポートされている HTML 要素のうち、Vite によって処理およびバンドルされるアセットを参照できるものは、`<link href>`、`<img src>` など、ごく一部に限られていました。

Vite 6 では、さらに多くの HTML 要素がサポート対象に追加されています。 完全なリストは、[HTML 機能](/guide/features.html#html)のドキュメントでご覧いただけます。

特定の要素の HTML 処理をオプトアウトするには、その要素に `vite-ignore` 属性を追加します。

### postcss-load-config

[`postcss-load-config`](https://npmjs.com/package/postcss-load-config) が v4 から v6 に更新されました。TypeScript の postcss 設定ファイルを読み込むために、[`ts-node`](https://www.npmjs.com/package/ts-node) の代わりに [`tsx`](https://www.npmjs.com/package/tsx) か [`jiti`](https://www.npmjs.com/package/jiti) が必要になりました。また、YAML の postcss 設定ファイルを読み込むために [`yaml`](https://www.npmjs.com/package/yaml) が必要になりました。
Expand Down