打包
注意
这是一个实验性功能，需要 Deno 2.4.0 或更高版本。
deno bundle 命令会输出一个包含所有依赖项的单个 JavaScript 文件。
deno bundle 底层由 ESBuild 提供支持。
此工具对于将项目部署或分发为单个优化过的 JS 文件非常有用。
支持的特性 跳到标题
- 解析并内联所有依赖项
- 支持 JSX/TSX、TypeScript 和现代 JavaScript，包括 导入属性 和 CSS
- 可选的代码压缩 (
--minify) 和源映射 (--sourcemap) - 代码分割
- 平台目标 (
--platform，支持 Deno 和浏览器) - 配置后支持 JSX
基本示例 跳到标题
main.ts
import chalk from "npm:chalk";
console.log(chalk.red("Hello from `deno bundle`!"));
$ deno bundle main.ts > bundle.js
# Or with an explicit output file:
$ deno bundle -o bundle.js main.ts
上述调用会生成一个包含所有依赖项的 bundle.js 文件，从而产生一个自包含的应用程序文件
$ deno bundle.js
Hello from `deno bundle`!
在要打包的文件中可以使用 JSR、npm、http(s) 和本地导入，deno bundle 会负责收集所有源文件并生成单个输出文件。
选项概览 跳到标题
| 标志 | 描述 |
|---|---|
-o, --output <文件> |
将打包输出写入文件 |
--minify |
为生产环境压缩输出 |
--format <格式> |
输出格式（默认为 esm） |
--code-splitting |
启用代码分割 |
--platform <平台> |
为 browser 或 deno 打包（默认: deno） |
--sourcemap |
包含源映射 (linked, inline, external) |
--watch |
文件更改时自动重建 |
--inline-imports |
内联导入的模块 (true 或 false) |
为 Web 打包一个 React 页面 跳到标题
从 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 is experimental and subject to changes
Bundled 9 modules in 99ms
app.bundle.js 874.67KB
此时，我们准备好提供页面服务了，让我们使用 来自 JSR 的 @std/http/file-server 来提供我们的应用服务
$ deno run -ENR jsr:@std/http/file-server
Listening on http://127.0.0.1:8000
在浏览器中访问该页面应该会显示
