阅读 1618

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

前言

不知不觉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的一些事儿......

文章分类
前端
文章标签