## 経緯
[[Deno]]のv2.4がリリースされた。
<div class="link-card-v2">
<div class="link-card-v2-site">
<span class="link-card-v2-site-name">Deno</span>
</div>
<div class="link-card-v2-title">
Deno 2.4: deno bundle is back | Deno
</div>
<div class="link-card-v2-content">
Deno bundle is back, alongside the addition of bytes and text imports, stabilized built-in OpenTelemetry, a new ...
</div>
<a href="https://deno.com/blog/v2.4"></a>
</div>
パッと見でアツい内容が多かったので、いくつか実際に試してみる。
## `deno bundle`
長らくdeprecatedになっていた [[deno bundle]] が復活した。
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://docs.deno.com/favicon.ico" />
<span class="link-card-v2-site-name">Deno</span>
</div>
<div class="link-card-v2-title">
Bundler
</div>
<div class="link-card-v2-content">
In-depth documentation, guides, and reference materials for building secure, high-performance JavaScript and Typ ...
</div>
<img class="link-card-v2-image" src="https://docs.deno.com/runtime/reference/cli/bundle/index.png" />
<a href="https://docs.deno.com/runtime/reference/cli/bundle/"></a>
</div>
最低限のファイルでプロジェクトを作成。
```ts
// main.ts
import { add } from "./lib.ts";
// Learn more at https://docs.deno.com/runtime/manual/examples/module_metadata#concepts
if (import.meta.main) {
console.log("Add 2 + 3 =", add(2, 3));
}
```
```ts
// lib.ts
export function add(a: number, b: number): number {
return a + b;
}
```
デフォルトのバンドル。
```console
$ deno bundle main.ts
⚠️ deno bundle is experimental and subject to changes
// lib.ts
function add(a, b) {
return a + b;
}
// main.ts
if (import.meta.main) {
console.log("Add 2 + 3 =", add(2, 3));
}
```
minifyしたもの。
```console
$ deno bundle main.ts --minify
⚠️ deno bundle is experimental and subject to changes
function o(d,r){return d+r}import.meta.main&&console.log("Add 2 + 3 =",o(2,3));
```
`--platform` とかも指定できる。
> [!question] [[deno compile]]との違いは？
> - [[deno compile]]は[[JavaScript]]の**実行環境がなくても**動く単一の**実行ファイル**にコンパイルするコマンド
> - [[deno bundle]]は[[JavaScript]]の**実行環境があれば動く**単一の**[[JavaScript]]ファイル**にバンドルするコマンド
## Importing text and bytes
テキストや、画像などのバイトファイルのインポートを、アセットファイルが存在しなくても使えるようになった。
```ts
// main.ts
import json from "./deno.json" with { type: "json" };
import img from "../../work/minerva/Attachments/minerva-logo.webp" with {
type: "bytes",
};
if (import.meta.main) {
console.log(json.tasks);
console.log(img);
}
```
これを[[deno bundle]]すると以下のように埋め込まれた結果が出力される。
```console
$ deno bundle main.ts
⚠️ deno bundle is experimental and subject to changes
var __toBinaryNode = (base64) => new Uint8Array(Buffer.from(base64, "base64"));
// deno.json
var deno_default = {
tasks: {
dev: "deno run -A --watch main.ts"
},
imports: {
"@std/assert": "jsr:@std/assert@1"
}
};
// ../../work/minerva/Attachments/minerva-logo.webp
// main.ts
if (import.meta.main) {
console.log(deno_default.tasks);
console.log(minerva_logo_default);
}
```
[[deno compile]]はバイトファイルに対応されていなそう。
```console
$ deno compile main.ts
error: The import attribute type of "bytes" is unsupported.
Specifier: file:///Users/tadashi-aikawa/work/minerva/Attachments/minerva-logo.webp
hint: run with --unstable-raw-imports
at file:///Users/tadashi-aikawa/tmp/deno-sandbox/main.ts:2:17
```
bytesインポートを削除して以下のようにしたら[[deno compile]]できた。
```ts
// main.ts
import json from "./deno.json" with { type: "json" };
if (import.meta.main) {
console.log(json.tasks);
}
```
ただ、以前から [[deno compile]] した場合はimportしたテキストファイルが埋め込まれている(ように見える)気がしたので、今回のことで何が嬉しいのかは分からず...。[[deno bundle]]などと同じロジックになったことなんだろうか..?
## Easier dependency management with `deno update`
[[deno update]]コマンドが追加された。
今までは `deno.json` に記載されていたライブラリを [[deno outdated]] で最新バージョンを調べ、手動でアップデートする必要があったが、[[deno update]]コマンドだけで完結するようになった。
> [!attention]
> コード内のimport文に直接バージョン表記されているものは対応されていない。