如何利用Deno内置工具搭建无框架Web应用

1. 项目基础结构 #

先搭建如下目录结构：

your-project/
├── src/
│   └── main.ts       # TypeScript业务代码文件
├── index.html        # 入口HTML文件
├── build.ts          # 自动监听编译脚本
└── deno.json         # Deno核心配置文件

将你的初始代码放入src/main.ts：

// src/main.ts
const addMe: Node = document.createElement("div");
addMe.innerText = "Hello World";
document.body.appendChild(addMe);

2. 配置deno.json #

在项目根目录创建deno.json，整合编译规则与任务命令：

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "ESNext"],
    "outDir": "./dist",
    "strict": true
  },
  "tasks": {
    "build": "deno bundle src/main.ts dist/bundle.js",
    "dev:watch": "deno run --allow-read --allow-write build.ts",
    "dev:serve": "deno serve --port 8000 --allow-net .",
    "dev": "deno task dev:watch & deno task dev:serve"
  }
}

配置说明： #

• compilerOptions：
  • lib: ["dom", "ESNext"]：自动加载DOM与ESNext的内置.d.ts类型定义，满足WebGL/Canvas项目的调试类型需求，无需额外引入文件。
  • outDir：指定编译产物的输出目录。
• tasks：
  • build：用Deno内置的deno bundle工具将TS代码打包为单文件JS。
  • dev:watch：启动文件监听脚本，自动触发重新打包。
  • dev:serve：用Deno内置HTTP服务器托管项目目录。
  • dev：同时启动监听与本地服务（Windows系统建议分开开两个终端执行dev:watch和dev:serve）。

3. 自动监听编译脚本（build.ts） #

创建build.ts实现文件变更自动打包：

// build.ts
import { watch } from "https://deno.land/std@0.208.0/fs/watch.ts";

console.log("正在监听src目录变化...");

for await (const event of watch("./src", { recursive: true })) {
  if (event.kind === "modify" || event.kind === "create") {
    console.log("文件变更，开始重新打包...");
    const process = new Deno.Command(Deno.execPath(), {
      args: ["bundle", "src/main.ts", "dist/bundle.js"],
      stdout: "inherit",
      stderr: "inherit"
    });
    await process.output();
    console.log("打包完成！");
  }
}

注：此处使用Deno官方维护的标准库工具，符合“少用第三方依赖”的要求。

4. 入口HTML文件（index.html） #

编写index.html引入打包后的JS：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Deno Web App</title>
</head>
<body>
  <script src="./dist/bundle.js"></script>
</body>
</html>

5. 开发与打包流程 #

开发模式 #

执行命令启动开发环境：

deno task dev

访问http://localhost:8000即可查看页面，修改src/main.ts后会自动重新打包，刷新页面即可看到更新。

生产打包 #

执行命令生成最终产物：

deno task build

产物会输出到dist/bundle.js，直接部署index.html与dist目录即可。

注意事项 #

• 若需自定义类型定义，可在compilerOptions中添加typeRoots字段，指向你的.d.ts文件目录。
• Windows系统无法直接用&后台运行命令，需分开启动监听与服务两个终端进程。

内容的提问来源于stack exchange，提问作者Seph Reed