🎄𝑀𝑒𝑟𝑟𝑦 𝐶ℎ𝑟𝑖𝑠𝑡𝑚𝑎𝑠 ◟̆◞̆

🎄 𝑀𝑒𝑟𝑟𝑦 𝐶ℎ𝑟𝑖𝑠𝑡𝑚𝑎𝑠 ◟̆◞̆

今天分享 CodePen 上一位大佬制作的圣诞树

CodePen地址：https://codepen.io/chrisgannon/pen/dypvKvR

尊重原创，只作娱乐用(#^.^#)，如果部署了，是会被检测到的，还请知晓。

结合Deno，让我们编译成一个应用程序吧！

下载资源

打开CodePen项目，右下角点击Export按钮，导出项目

解压后得到merry-christmas-tree文件，VSCode打开项目

初始化Deno项目

deno init --serve

deno init 官网文档：https://docs.deno.com/runtime/reference/cli/init/

其中src目录可以删除，我们将dist文件夹内容作为服务启动

启动服务，查看效果

修改main.ts内容如下：

import { serveDir } from "@std/http";
import { exec } from "node:child_process";

function defaultHandler(req: Request) {
  return serveDir(req, { fsRoot: import.meta.dirname + "/dist" });
}

Deno.serve({
  port: 9999,
  hostname: "127.0.0.1",
  handler: defaultHandler,
  onListen({ port, hostname }) { // 服务启动后执行
    console.log(`Server started at http://${hostname}:${port}`);
    exec(`start http://${hostname}:${port}`); //注意`start`为windows命令，需要替换为对应的操作系统命令
  },
});

其中import.meta.dirname务必加上，避免编译成应用程序后，提示无法找到dist目录。

详情可查看 github.com/denoland/de…

接下来终端运行如下命令:

deno run --allow-net --allow-read --allow-env --allow-run main.ts

deno run 官网文档：https://docs.deno.com/runtime/reference/cli/run/

或修改deno.json文件，新增一条tasks记录：

"tasks": {
  "serve": "deno run --allow-net --allow-read --allow-env --allow-run main.ts",
}

然后终端运行：

deno task serve

deno task 官网文档：https://docs.deno.com/runtime/reference/cli/task/

浏览器自动打开后，即可查看效果；或地址栏手动输入127.0.0.1:9999

编译成应用程序

修改deno.json文件，新增一条task记录：

"tasks": {
  "compile": "deno compile --allow-net --allow-read --allow-env --allow-run --include dist main.ts",
}

注意命令后的--include dist，因为main.ts中是将dist作为服务目录的，所以编译时，需要协同目录一起

终端输入命令：

deno task compile

因为我是windows上操作，所以生成了一个名为merry-christmas-tree.exe的可执行文件，双击即可运行。

如果是其他操作系统，可在compile后加上--target选项，如下：

OS	Architecture	Target
Windows	x86_64	x86_64-pc-windows-msvc
macOS	x86_64	x86_64-apple-darwin
macOS	ARM64	arch64-apple-darwin
Linux	x86_64	x86_64-unknown-linux-gnu
Linux	ARM64	aarch64-unknown-linux-gnu

例如：macOS（x86_64）

deno compile --target x86_64-apple-darwin --allow-net --allow-read --allow-env --allow-run --include dist main.ts

deno compile 官网文档： https://docs.deno.com/runtime/reference/cli/compile/