On this page
打包
这是一个实验性功能，要求 Deno 版本为 2.4.0 或更高。
deno bundle 命令输出一个包含所有依赖的单个 JavaScript 文件。
deno bundle 在内部由 ESBuild 提供支持。
该工具适用于将项目打包或分发成单个优化的 JS 文件。
支持的功能 Jump to heading
- 解析并内联所有依赖
- 支持 JSX/TSX、TypeScript 和现代 JavaScript，包括 导入属性 和 CSS
- 支持 HTML 入口点（Deno 2.5 及以上）
- 可选的代码压缩（
--minify）和源码映射（--sourcemap） - 代码拆分
- 平台目标设置（
--platform，支持 Deno 和浏览器） - 配置时支持 JSX
基本示例 Jump to heading
import chalk from "npm:chalk";
console.log(chalk.red("Hello from `deno bundle`!"));
$ deno bundle main.ts > bundle.js
# 或者显式指定输出文件：
$ deno bundle -o bundle.js main.ts
以上命令会生成一个包含所有依赖的单一 bundle.js 文件，成为一个自包含的应用文件：
$ deno bundle.js
Hello from `deno bundle`!
你可以在打包文件中使用 JSR、npm、http(s) 以及本地导入，
deno bundle 会负责收集所有源文件并生成单个输出文件。
选项概览 Jump to heading
| Flag | Description |
|---|---|
-o, --output <file> |
将打包输出写入文件 |
--outdir <dir> |
将打包输出写入目录 |
--minify |
对输出进行压缩以用于生产环境 |
--format <format> |
输出格式（默认 esm） |
--code-splitting |
启用代码拆分 |
--platform <platform> |
为 browser 或 deno 打包（默认：deno） |
--sourcemap |
包含源码映射（linked、inline、external） |
--watch |
在文件变更时自动重新构建 |
--inline-imports |
内联导入的模块（true 或 false） |
--packages <how> |
如何处理包：bundle（默认）或 external |
--external <pkg> |
从打包结果中排除某个模块或包 |
--keep-names |
保留原始函数和类名 |
完整的标志列表请运行 deno bundle --help。
类型声明 Jump to heading
传入 --declaration 来在打包后的 JavaScript 旁边生成 TypeScript 声明文件。Deno 会将每个入口点的类型汇总到一个独立的、自包含的 .d.ts 文件中，因此 bundle 的使用者无需原始源码也能获得完整的类型信息：
deno bundle main.ts --outdir dist --declaration
# 生成 dist/main.js 和 dist/main.d.ts
当你将 bundle 作为库发布时，这一点很重要：.d.ts 允许下游的 TypeScript 项目针对你的 bundle 的公共 API 进行类型检查。每个入口点都会在其 JavaScript 输出旁边生成各自的声明文件。
Runtime API Jump to heading
除了 CLI 之外，你还可以使用 Deno.bundle()
以编程方式打包你的 JavaScript 或 TypeScript 文件。这使你能够将打包集成到
构建流程和工作流中。
基本用法 Jump to heading
const result = await Deno.bundle({
entrypoints: ["./index.tsx"],
outputDir: "dist",
platform: "browser",
minify: true,
});
console.log(result);
在内存中处理输出 Jump to heading
你也可以选择不将输出写入磁盘，而是在内存中处理打包结果：
const result = await Deno.bundle({
entrypoints: ["./index.tsx"],
output: "dist",
platform: "browser",
minify: true,
write: false,
});
for (const file of result.outputFiles!) {
console.log(file.text());
}
这种方式为将打包过程集成到各种工作流中提供了更大灵活性，比如直接从内存中提供打包文件，或对输出执行额外处理。
支持 HTML 入口点 Jump to heading
从 Deno 2.5 起，deno bundle 支持以 HTML 文件作为入口点。之前仅支持 .js、.ts、.jsx 和 .tsx 文件作为入口点。
deno bundle --outdir dist index.html
当你使用 HTML 文件作为入口点时，deno bundle 会：
- 查找 HTML 文件中的所有脚本引用
- 打包这些脚本及其依赖
- 更新 HTML 文件中的路径指向打包后的脚本文件
- 打包并注入所有导入的 CSS 文件到 HTML 输出中
示例 Jump to heading
假设有如下 index.tsx 文件：
import { render } from "npm:preact";
import "./styles.css";
const app = (
<div>
<p>你好，世界！</p>
</div>
);
render(app, document.body);
以及一个引用该文件的 HTML 文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>示例</title>
<script src="./index.tsx" type="module"></script>
</head>
</html>
执行 deno bundle --outdir dist index.html 后输出：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>示例</title>
<script src="./index-2TFDJWLF.js" type="module" crossorigin></script>
<link rel="stylesheet" crossorigin href="./index-EWSJYQGA.css">
</head>
</html>
打包输出文件名包含基于内容的哈希，用于缓存破坏和指纹识别。
HTML 入口点在以上命令行工具和运行时 API 中均得到完整支持。
何时使用 HTML 打包 Jump to heading
deno bundle index.html— 非常适合对小型静态应用进行快速打包构建- Vite — 适合需要更复杂生态支持的项目
两种方式在 Deno 上均可无缝使用，您可以根据工作流选择适合的方案。
为网页打包 React 页面 Jump to heading
从 app.jsx 和 index.html 文件开始：
import React from "npm:react";
import { createRoot } from "npm:react-dom/client";
function App() {
return <h1>Hello, React!</h1>;
}
const root = createRoot(document.getElementById("root"));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
<script type="module" src="/bundle.js"></script>
</body>
</html>
现在，我们开始打包：
$ deno bundle --platform=browser app.jsx -o bundle.js
⚠️ deno bundle 是实验性功能，可能会发生变化
Bundled 9 modules in 99ms
bundle.js 874.67KB
此时，我们已经可以开始提供页面服务了，使用
@std/http/file-server 来托管我们的应用：
$ deno run -ENR jsr:@std/http/file-server
Listening on http://127.0.0.1:8000
在浏览器中访问页面应显示：
Last updated on