Deno的简单运用 | 🏆 技术专题第一期

神奇的程序员
2,473 阅读8分钟

前言

不知不觉Deno正式版已经发布两个多月了，我也是看到它发布正式版后被它的亮点所吸引，第一时间就上手体验了。

本文将结合我两个月来的使用感受讲解Deno相对于前端而言的简单使用，欢迎各位感兴趣的开发者阅读本文。

初识Deno

2020年5月13日，日常沸点摸鱼，看到了deno发布的消息，点进去后才知道是node作者的又一新作，作者在设计node的时候因为犯了一些错误，包括安全性、构建系统、package.json、node_modules、index.js等等，并表示node存在的种种不足导致有许多严重bug问题且不可回避，现在JavaScript和周围的软件基础架构发生了巨大的变化，在原来的基础上去改，还不如重写，于是他重新设计了Deno这门脚本语言。

接下来我们来看下Deno都有哪些新特性，这里我们引用Deno官网的一句话。

Deno JavaScript和TypeScript的安全运行时


Deno是使用V8并内置于Rust的JavaScript和TypeScript的简单，现代且安全的运行时。

  • 安全性，当在开发服务端程序时，除非显式启用，否则不能访问文件、网络或环境。
  • 支持TypeScript的开箱即用，这一点也是我最喜欢的，也是唯一让我使用它的理由。
  • 只发布一个可执行文件，即所有后端服务开发完成后，打包后他只是一个可执行文件，直接在服务器运行即可。
  • 具有内置的实用程序，例如依赖项检查器（表示信息）和代码格式化程序（表示为fmt）。

上面就是Deno官网列出的一些特性，对我而言我能用到deno的地方就是它内置的TypeScript解析器，可以无痛运行ts代码。这也是我能了解到的前端唯一用得到它的地方。

当然如果你说他可以像node一样读写文件，有网络操作的api，可以开发接口，但是我并不觉得这属于前端范畴。

安装Deno

我开始学TypeScript也是因为Deno正式版的发布，之前一直对TypeScript是望而止步的，因为要想单独使用TypeScript需要安装很多东西做很多配置才行，正好我deno发布时候我在学数据结构和算法，于是脑子里产生了用TypeScript来实现数据结构的想法，这样一来数据结构学会了，TypeScript的使用也掌握了，两全其美的事情。

话不多说，接下来我们就来看看如何安装deno吧。

windows环境

  • 在deno在github上的releases页面下载windows安装包

image.png

  • 将下载到的压缩包解压，你会得到一个名为deno.exe的可执行文件

image.png

  • 在C:\Program Files下新建deno文件夹，将deno.exe放进去

image.png

  • 打开环境变量配置面板，在Path下新增一条名为deno的变量，路径就选择我们刚才存放deno.exe的路径

image.png


至此，你已经成功的安装了deno，接下来我们测试下是否安装成功。在windows终端或cmd执行deno -V，出现如下图所示的信息则安装成功。
    
image.png

MacOS环境

在Mac下安装比windows就有好多了，用brew直接一条命令即可安装。

  • 打开mac的终端，执行下述命令
# 为了确保我们安装的deno是最新的，需要先更新下brew
brew update
# 安装deno
brew install deno
  • 安装完成后，brew会自动为我们配置环境变量，我们只需要像windows一样在终端执行查看版本命令即可验证是否安装成功

使用Deno

前面我们搭建好了Deno的环境，接下来我们来看看如何使用它。

  • 我们新建一个ts文件，写点ts代码进去。
export class Graph {
    // 存储图的顶点
    private vertices: (number | string)[] = [];
    // 存储临接表
    private adjList: Dictionary<string | number, (string | number)[]> = new Dictionary();

    constructor(private isDirected: boolean = false) {
        console.log("deno执行ts成功");
    }

    // 添加顶点
    addVertex(v: string | number): void {
        // 顶点不存在于图中
        if (!this.vertices.includes(v)) {
            // 将该顶点添加到顶点列表中
            this.vertices.push(v);
            // 在临接表中设置顶点v作为键，对应的字典值为一个空数组
            this.adjList.set(v, []);
        }
    }

    // 添加线，连接顶点
    addEdge(v: string | number, w: string | number): void {
        // 添加顶点之前需要验证顶点v和w是否在图中，不存在就追加
        if (!this.adjList.get(v)) {
            this.addVertex(v);
        }
        if (!this.adjList.get(w)) {
            this.addVertex(w);
        }

        // 将w加入到v的临接表中，我们就得到了一条来自顶点v到顶点w的边
        this.adjList.get(v)?.push(w);
        if (!this.isDirected) {
            // 如果是无向图则需要添加一条自w到v的边
            this.adjList.get(w)?.push(v);
        }
    }

    // 获取顶点列表
    getVertices(): (string | number)[] {
        return this.vertices;
    }

    // 获取临接表
    getAdjList(): Dictionary<string | number, (string | number)[]> {
        return this.adjList;
    }

    // 将图转为字符串
    toString(): string {
        let s = "";
        for (let i = 0; i < this.vertices.length; i++) {
            s += `${this.vertices[i]} -> `;
            const neighbors = <Array<string | number>>this.adjList.get(this.vertices[i]);
            for (let j = 0; j < neighbors.length; j++) {
                s += `${neighbors[j]} `;
            }
            s += "\n";
        }
        return s;
    }
}
  • 新建一个js文件，导入我们刚才创建的ts文件，实例化Graph类
import { Graph } from "./lib/Graph.ts";
let graph = new Graph();
let vertices = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
for (let i = 0; i < vertices.length; i++) {
    graph.addVertex(vertices[i]);
}
graph.addEdge("A", "B");
graph.addEdge("A", "C");
graph.addEdge("A", "D");
graph.addEdge("C", "D");
graph.addEdge("C", "G");
graph.addEdge("D", "G");
graph.addEdge("D", "H");
graph.addEdge("B", "E");
graph.addEdge("B", "F");
graph.addEdge("E", "I");
console.log("图的关系对应如下");
console.log(graph.toString());
  • 在终端进入我们的刚才创建js文件的目录，使用deno run命令来执行我们刚才创建的js文件
deno run GraphTest.js

执行结果如下， 我们发现已经成功执行了我们在js中导入的ts文件中的方法。

image.png

更多使用方法

当然deno不只是用来运行ts的，它还有很多api可用于开发服务端应用，想了解更多有关服务端开发的开发者请移步deno官方文档。

编辑器添加Deno支持

上面我们使用deno时采用的是手动输入命令来执行的，这样太过于麻烦，因此我们需要安装插件来支持它。

因为我是webstorm的重度用户，在deno刚发布时，我去webstorm的插件商店搜了一下，没发现有deno的插件，但是隔壁vscode缺已经有了相关插件，但是我是个专一的人，是不会投向vscode阵营的。

我当时还掘金发沸点吐槽了下webstorm不支持deno，得到的掘友回复是正在开发。

image.png


好吧，那我就等，我在终端敲了一个月的deno run 命令，一个月后，deno的插件终于开发出来了，当时我很激动发了条沸点。

image.png


接下来就来分享下如何在webstorm中安装deno。

  • 在插件商店中搜索 deno，如下图所示，他是由jet官方开发的，点击安装即可。

image.png

  • 安装完成后，重启编辑器，我们在settings中搜索deno，如下图所示，勾选即可

image.png

  • 我们打开一个js文件，在代码右键，就能发现 Run "Deno: xxx"的选项，点击就会运行。

image.png

  • 当然，我们还可以调试ts文件，上图的右键菜单中在Run选项的下方还有个Debug，我们只需要在ts文件中打上断点，选择debug即可打开webstorm的调试视图

image.png


至此，编辑器添加deno的支持就完成了，细心的开发者应该已经发现我上图调试视图中，中文无法正常显示，发生了乱码的情况。

这也是我想吐槽的地方，他这个插件对windows平台很不友好，不仅中文乱码，而且调试也不能用，加了断点，它不会走。然而mac平台却是正常的，为此我也在这个插件的底部留言了，希望开发者能尽快修复这个bug吧。
image.png

我对Deno的看法

现在deno属于高速发展的阶段，如果用它来开发服务端的话，他是肯定竞争不过node的，因为node发展了这么久，已经有了它的生态，比如egg、koa等优秀的框架。

当然我写服务端应用肯定不会用node和deno的，毕竟他们在老牌服务端语言里算是后来者，在开发过程中遇到问题也会花大量的时间去填坑。

因为我是从Java入行的，所以更青睐于Java写服务端应用，毕竟它的生态很完善，有无数的前辈为我们踩坑。至于deno未来的发展怎么样，这就取决于国内外大公司肯不肯为了deno造轮子从而丰富其生态。

看到好多人讨论了deno干掉node之类的话题，至于最终deno和node哪个赢，就交给时间吧。在我看来这个市场本来就是优胜略汰的，落后就要挨打，对于我们开发者而言，优秀的东西可以节省开发时间，无非就是增加了学习成本，但是这些都问题不大。

写在最后

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注😊
  • 本文首发于掘金，未经许可禁止转载💌


🏆 技术专题第一期 | 聊聊 Deno的一些事儿......

avatar
文章
阅读
粉丝