🚀 体验新的JS运行时环境 -- Deno

草帽Plasticine
276 阅读5分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第31天，点击查看活动详情

目前JavaScript流行的运行时环境主要有两个，一个是浏览器环境下的，一个是Node环境下的，而如今出现了两个新的JavsScript运行时环境 -- Deno和Bun，本期我们来讲一下Deno，之后有机会再讲讲Bun

体验Deno

Deno介绍

以下是维基百科中对Deno的介绍：

Deno是基于V8引擎和Rust语言所创建的JavaScript、TypeScript执行环境，由Node.js的原始开发者瑞安·达尔所创造。

达尔在2018年的演讲“我为Node.js感到后悔的十件事”中宣布了Deno。

Deno在单个可执行档中扮演执行环境和包管理系统的角色，不需要将其分开。

从最后一句话我们也能够看出，Deno不需要像Node和npm那样运行时环境和包管理工具分开，而是直接合并在一起的

再看看Deno官方的介绍：

A modern runtime for JavaScript and TypeScript

Deno is a simple, modern and secure runtime for JavaScript, TypeScript, and WebAssembly that uses V8 and is built in Rust.

看来Deno是能够天然支持运行TypeScript而不需要将其编译为js再运行，这样一来相比起目前node中需要运行ts时我们都是使用ts-node去运行的

用过的人也都会发现，这种方式运行ts代码总是要等一段时间，即便是很简单的内容的ts代码也是需要等待一段时间，并不能像node直接运行js那样做到秒出结果，开发体验不是很好，待会体验Deno的时候我们来看看它运行ts代码的速度如何，能否做到秒出运行结果

体验Deno

安装Deno

首先跟着官方文档的步骤安装一下Deno，由于我是在linux下运行的，所以执行如下命令

curl -fsSL https://deno.land/install.sh | sh

然后按照它的提示，将家目录下的.deno/bin加入到环境变量中（我用的zsh，所以修改~/.zshrc）

export DENO_INSTALL="/home/plasticine/.deno"
export PATH="$DENO_INSTALL/bin:$PATH"

保存后记得执行以下source ~/.zshrc将shell的配置文件刷新以下，这样就可以在全局使用Deno了，我们可以到这个目录下看看.deno里面都有啥

image.png

能看到，就是一个可执行程序，并没有别的东西了

官方示例 -- 运行远程的ts代码

接下来我们就再跑一下官方的示例，从官方的示例来看，deno运行了一个url，这个url貌似是一段ts代码，这点在node上是从来没见过的，先来跑跑看

deno run https://deno.land/std@0.153.0/examples/welcome.ts

image.png

能看到成功执行ts代码，我们可以点开链接看看这个执行的代码内容是啥

import * as mod from "https://deno.land/std@0.153.0/examples/welcome.ts";

能看到的是，deno似乎支持直接将url作为模块进行导入，并且支持ESM的模块化规范，似乎很强大！

官方示例 -- 运行本地的ts代码

官方也给了另外一个示例，我们在本地新建一个deno-demo.ts，并写入以下代码尝试执行：

import { serve } from "[https://deno.land/std@0.153.0/http/server.ts](https://deno.land/std@0.153.0/http/server.ts?source)";serve(req => new Response("Hello World\n"));

运行效果如下：

image.png

从这个运行结果我们可以直到Deno的以下几个特性：

  1. 直接执行ts代码，这里我们并没有像node环境下那样用npm init初始化一个环境然后安装TypeScript等依赖，然后才能执行，Deno是直接就可以运行ts代码
  2. 集成了依赖管理，执行ts的代码中有一个import导入了一个模块，但是我们并没有像node那样安装相关依赖再去执行，而是由deno自行去处理依赖了，这点十分方便
  3. 安全性更高，可以看到这里我们的ts示例代码的功能是在本地的8000端口运行一个简单的服务器，如果是node环境下的话，运行脚本后直接就会在8000端口上开启一个服务器了，而deno这里是会有一个询问的过程的，如果用户不允许的话脚本执行就会失败，安全性更高，并且Deno底层用的是Rust编写的，虽然我不了解这门语言，但是听说过它在安全性方面十分强大

接下来我们访问以下本地的8000端口看看有些什么

image.png

可以看到就是一个简单的服务器，返回一个Hello World给浏览器，没啥特别的

这里跑的是官方的示例，我们现在自己写一个简单的示例看看能否运行起来

本地示例 -- 运行js和ts代码

首先来执行一个涉及宏任务和微任务执行顺序的js代码

console.log("script start");

setTimeout(() => {
  console.log("macro task 1");
  Promise.resolve().then(() => {
    console.log("micro task from macro task 1");
  });
}, 0);

setTimeout(() => {
  console.log("macro task 2");
  Promise.resolve().then(() => {
    console.log("micro task from macro task 2");
  });
}, 0);

Promise.resolve().then(() => {
  console.log("micro task from script");
});

console.log("script end");

分别用deno和node运行一下看看

image.png

运行结果出来的速度十分快，而且运行结果一样，不过由于这是js代码，node运行起来本身也是秒出结果，接下来再看看运行ts会不会出现ts-node那样等半天才有结果的尴尬情况

image.png

对于ts的运行结果也是秒出！而ts-node运行起来大概停顿了1秒左右，开发体验上直接秒杀ts-node

看来以后可以使用deno去运行一些ts的代码示例了，每次有些简单的代码想要ts中运行时我都是使用ts-node，但是很受不了那一点等待的时间，总感觉像是卡住了一样，而deno就不会，至于其他更多的特性就不过多介绍啦，感兴趣的读者可以自行去deno官网了解，下期我们再聊聊另一个新的js运行时环境 -- Bun，据说运行速度秒杀node和deno哦！

avatar
文章
阅读
粉丝