通俗易懂的Deno 入門教程，一看便會

1、Deno 簡介前端

Deno 是一個 JavaScript/TypeScript 的運行時，默認使用安全環境執行代碼，有着卓越的開發體驗。Deno 含有如下功能亮點：node

默認安全。外部代碼沒有文件系統、網絡、環境的訪問權限，除非顯式開啓。git

支持開箱即用的 TypeScript 的環境。github

只分發一個獨立的可執行文件（deno）。chrome

有着內建的工具箱，好比一個依賴信息查看器（deno info）和一個代碼格式化工具（deno fmt）。typescript

有一組通過審計的標準模塊，保證能在 Deno 上工做。shell

腳本代碼能被打包爲一個單獨的 JavaScript 文件。編程

Deno 是一個跨平臺的運行時，即基於 Google V8 引擎的運行時環境，該運行時環境是使用 Rust 語言開發的，並使用 Tokio 庫來構建事件循環系統。Deno 創建在 V八、Rust 和 Tokio 的基礎上，它的架構以下：json

1.1 Rust瀏覽器

Rust 是由 Mozilla 主導開發的通用、編譯型編程語言。設計準則爲「安全、併發、實用」，支持函數式、併發式、過程式以及面向對象的編程風格。Deno 使用 Rust 語言來封裝 V8 引擎，經過 libdeno 綁定，咱們就能夠在 JavaScript 中調用隔離的功能。

1.2 Tokio

Tokio 是 Rust 編程語言的異步運行時，提供異步事件驅動平臺，構建快速，可靠和輕量級網絡應用。利用 Rust 的全部權和併發模型確保線程安全。Tokio 構建於 Rust 之上，提供極快的性能，使其成爲高性能服務器應用程序的理想選擇。在 Deno 中 Tokio 用於並行執行全部的異步 IO 任務。

1.3 V8

V8 是一個由 Google 開發的開源 JavaScript 引擎，用於 Google Chrome 及 Chromium 中。V8 在運行以前將JavaScript 編譯成了機器代碼，而非字節碼或是解釋執行它，以此提高性能。更進一步，使用瞭如內聯緩存（inline caching）等方法來提升性能。有了這些功能，JavaScript 程序與 V8 引擎的速度媲美二進制編譯。在 Deno 中，V8 引擎用於執行 JavaScript 代碼。

2、安裝 Deno

Deno 可以在 macOS、Linux 和 Windows 上運行。Deno 是一個單獨的可執行文件，它沒有額外的依賴。你能夠經過如下方式來安裝它：

使用 Shell (macOS 和 Linux)：

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

使用 PowerShell (Windows)：

iwr https://deno.land/x/install/install.ps1 -useb | iex

使用 Scoop (Windows)：

scoop install deno

使用 Chocolatey (Windows)：

choco install deno

使用 Homebrew (macOS)：

brew install deno

使用 Cargo (Windows，macOS，Linux)：

cargo install deno

Deno 也能夠手動安裝，只需從 github.com/denoland/deno/releases 下載一個 zip 文件。它僅包含一個單獨的可執行文件。在 macOS 和 Linux 上，你須要爲它設置執行權限。當你成功安裝以後，能夠經過執行 deno --version 命令來查看已安裝的 Deno 版本：

$ deno --version
deno 1.0.0
v8 8.4.300
typescript 3.9.2

2.1 deno-cli

deno-cli 命令行界面提供了一組集成功能，讓你能夠沉浸在 Deno 的專有開發環境中。如下是 Deno 1.0.0 版本支持的全部子命令：

SUBCOMMANDS:
bundle Bundle module and dependencies into single file
cache Cache the dependencies
completions Generate shell completions
doc Show documentation for a module
eval Eval script
fmt Format source files
help Prints this message or the help of the given subcommand(s)
info Show info about cache or info related to source file
install Install script as an executable
repl Read Eval Print Loop
run Run a program given a filename or url to the module
test Run tests
types Print runtime TypeScript declarations
upgrade Upgrade deno executable to given version

2.2 REPL

在命令中輸入 deno 命令，你就會啓動一個 REPL（Read-Execute-Print-Loop）:

$ deno
Deno 1.0.0
exit using ctrl+d or close()

1 + 2
3
const name = 「semlinker」;
undefined
console.log(name);
semlinker
undefined

3、Deno 初體驗

3.1 welcome demo

相信一些讀者安裝完 Deno 已經火燒眉毛了，如今咱們立馬來體驗一下 Deno 應用程序。首先打開你熟悉的命令行，而後在命令行輸入如下命令：

$ deno run https://deno.land/std/examples/welcome.ts
Download https://deno.land/std/examples/welcome.ts
Warning Implicitly using master branch https://deno.land/std/examples/welcome.ts
Compile https://deno.land/std/examples/welcome.ts
Welcome to Deno 🦕

經過觀察以上輸出，咱們能夠知道當運行 deno run https://deno.land/std/examples/welcome.ts 命令以後，Deno 會先從https://deno.land/std/examples/welcome.ts URL 地址下載 welcome.ts 文件，該文件的內容是：

console.log(「Welcome to Deno 🦕」);

當文件下載成功後，Deno 會對 welcome.ts 文件進行編譯，即編譯成 welcome.ts.js文件，而後再經過 V8 引擎來執行編譯生成的 JavaScript 文件。須要注意的是，若是你在命令行從新運行上述命令，則會執行緩存中已生成的文件，並不會再次從網上下載 welcome.ts 文件。

$ deno run https://deno.land/std/examples/welcome.ts
Welcome to Deno 🦕

那如何證實再次執行上述命令時， Deno 會優先執行緩存中編譯生成的 JavaScript 文件呢？這裏咱們要先介紹一下 deno info 命令，該命令用於顯示有關緩存或源文件相關的信息：

$ deno info
DENO_DIR location: 「/Users/fer/Library/Caches/deno」
Remote modules cache: 「/Users/fer/Library/Caches/deno/deps」
TypeScript compiler cache: 「/Users/fer/Library/Caches/deno/gen」

在上述的輸出信息中，咱們看到了 TypeScript compiler cache 這行記錄，很明顯這是 TypeScript 編譯器緩存的目錄，進入該目錄後，經過一層層的查找，咱們最終在 examples 目錄下找到了 welcome.ts.js 文件：

➜ examples ls
welcome.ts.js welcome.ts.js.map welcome.ts.meta

打開目錄中 welcome.ts.js 文件，咱們能夠看到如下內容：

「use strict」;
console.log(「Welcome to Deno 🦕」);
//# sourceMappingURL=file:///Users/fer/Library/Caches/deno/gen/https/deno.land/std/examples/welcome.ts.js.map

下面咱們來修改該文件，在文件中添加一行輸出信息 console.log(「Hello Semlinker, from Cache」);，具體以下：

「use strict」;
console.log(「Hello Semlinker, from Cache」);
console.log(「Welcome to Deno 🦕」);
//# sourceMappingURL=file:///Users/fer/Library/Caches/deno/gen/https/deno.land/std/examples/welcome.ts.js.map

接着咱們在命令行中從新執行如下命令：

$ deno run https://deno.land/std/examples/welcome.ts
Hello Semlinker, from Cache
Welcome to Deno 🦕

那麼如今問題又來了，如何強制刷新緩存，即從新編譯 TypeScript 代碼呢？針對這個問題，在運行 deno run 命令時，咱們須要添加 --reload 標誌，來告訴 Deno 須要從新刷新指定文件：

$ deno run --reload https://deno.land/std/examples/welcome.ts
Download https://deno.land/std/examples/welcome.ts
Warning Implicitly using master branch https://deno.land/std/examples/welcome.ts
Compile https://deno.land/std/examples/welcome.ts
Welcome to Deno 🦕

除了 --reload 標誌以外，Deno run 命令還支持不少其餘的標誌，感興趣的讀者能夠運行 deno run --help 命令來查看更多的信息。

3.2 TCP echo server

前面咱們已經介紹瞭如何運行官方的 welcome 示例，下面咱們來介紹如何使用 Deno 建立一個簡單的 TCP echo 服務器。首先咱們建立一個 learn-deno 項目，而後在該項目下新建一個 quickstart 目錄，接着新建一個 echo_server.ts 文件並輸入如下代碼：

const listener = Deno.listen({ port: 8080 });
console.log(「listening on 0.0.0.0:8080」);
for await (const conn of listener) {
Deno.copy(conn, conn);
}

for await…of 語句會在異步或者同步可迭代對象上建立一個迭代循環，包括 String，Array，Array-like 對象（好比 arguments 或者 NodeList)，TypedArray，Map， Set 和自定義的異步或者同步可迭代對象。

for await…of 的語法以下：

for await (variable of iterable) {statement}

輸入完以上代碼以後，相信不少讀者會跟我同樣，直接在命令行運行如下命令：

➜ quickstart deno run ./echo_server.ts
Compile file:///Users/fer/LearnProjects/learn-deno/quickstart/echo_server.ts
error: Uncaught PermissionDenied: network access to 「0.0.0.0:8080」, run again with the --allow-net flag
at unwrapResponse (denodeno/ops/dispatch_json.ts:43:11)
at Object.sendSync (denodeno/ops/dispatch_json.ts:72:10)
at Object.listen (denodeno/ops/net.ts:51:10)
at Object.listen (denodeno/net.ts:152:22)
at file:///Users/fer/LearnProjects/learn-deno/quickstart/echo_server.ts:1:23

很明顯是權限錯誤，從錯誤信息中，Deno 告訴咱們須要設置 --allow-net 標誌，以容許網絡訪問。爲何會這樣呢？這是由於 Deno 是一個 JavaScript/TypeScript 的運行時，默認使用安全環境執行代碼。下面咱們添加 --allow-net 標誌，而後再次運行 echo_server.ts 文件：

➜ quickstart deno run --allow-net ./echo_server.ts
listening on 0.0.0.0:8080

當服務器成功運行以後，咱們使用 nc 命令來測試一下服務器的功能：

➜ ~ nc localhost 8080
hell semlinker
hell semlinker

介紹完如何使用 Deno 建立一個簡單的 TCP echo 服務器，咱們再來介紹一下如何使用 Deno 建立一個簡單的 HTTP 服務器。

3.3 HTTP Server

與 TCP Server 同樣，在 quickstart 目錄下，咱們新建一個 http_server.ts 文件並輸入如下內容：

import { serve } from 「https://deno.land/std@v0.50.0/http/server.ts」;

const PORT = 8080;
const s = serve({ port: PORT });

console.log(Listening on <http://localhost>:${PORT}/);

for await (const req of s) {
req.respond({ body: 「Hello Semlinker\n」 });
}

友情提示：在實際開發過程當中，你能夠從 https://deno.land/std 地址獲取所需的標準庫版本。示例中咱們顯式指定了版本，固然你也能夠不指定版本，好比這樣：https://deno.land/std/http/server.ts 。

在上述代碼中，咱們導入了 Deno 標準庫 http 模塊中 serve 函數，而後使用該函數快速建立 HTTP 服務器，該函數的定義以下：

// std/http/server.ts
export function serve(addr: string | HTTPOptions): Server {
if (typeof addr === 「string」) {
const [hostname, port] = addr.split("😊;
addr = { hostname, port: Number(port) };
}

const listener = listen(addr);
return new Server(listener);
}

serve 函數接收一個參數，其類型是 string | HTTPOptions，其中 HTTPOptions 接口的定義以下：

/** Options for creating an HTTP server. */
export type HTTPOptions = Omit<Deno.ListenOptions, 「transport」>;

export interface ListenOptions {
/** The port to listen on. /
port: number;
/* A literal IP address or host name that can be resolved to an IP address.
* If not specified, defaults to 0.0.0.0. */
hostname?: string;
}

當輸入的參數類型是字符串時，serve 函數會使用 : 冒號對字符串進行切割，獲取 hostname 和 port，而後包裝成對象賦值給 addr 參數，接着使用 addr 參數繼續調用 listen 函數進一步建立 listener 對象，最終調用 new Server(listener) 建立 HTTP 服務器。

建立完 HTTP 服務器，咱們來啓動該服務器，打開命令行輸入如下命令：

➜ quickstart deno run --allow-net ./http_server.ts
Compile file:///Users/fer/LearnProjects/learn-deno/quickstart/http_server.ts
Listening on http://localhost:8080/

接着打開瀏覽器，在地址欄上輸入 http://localhost:8080/ 地址，以後在當前頁面中會看到如下內容：

Hello World\n

4、調試 Deno

Deno 支持 V8 Inspector Protocol。使用 Chrome Devtools 或其餘支持該協議的客戶端（好比 VSCode）可以調試 Deno 程序。要啓用調試功能，用 --inspect 或 --inspect-brk 選項運行 Deno，對應的選項描述以下：

–inspect=HOST:PORT
activate inspector on host:port (default: 127.0.0.1:9229)

–inspect-brk=HOST:PORT
activate inspector on host:port and break at start of user script

–inspect 選項容許在任什麼時候間點鏈接調試器，而 --inspect-brk 選項會等待調試器鏈接，在第一行代碼處暫停執行。

4.1 Chrome Devtools

讓咱們用 Chrome 開發者工具來調試一個簡單的程序，咱們將使用來自 std 的 file_server.ts，這是一個簡單的靜態文件服務。

使用 --inspect-brk 選項，在第一行代碼處暫停執行。

$ deno run --inspect-brk --allow-read --allow-net https://deno.land/std@v0.50.0/http/file_server.ts
Debugger listening on ws://127.0.0.1:9229/ws/1e82c406-85a9-44ab-86b6-7341583480b1
Download https://deno.land/std@v0.50.0/http/file_server.ts
Compile https://deno.land/std@v0.50.0/http/file_server.ts
…

打開 chrome://inspect，點擊 Target 旁邊的 Inspect。

進一步瞭解更詳細的調試說明，可訪問https://deno.land/manual/tools/debugger URL 地址。

4.2 VSCode

Deno 能夠在 VSCode 中調試。插件的官方支持正在開發中 https://github.com/denoland/vscode_deno/issues/12，固然咱們也能夠經過手動提供launch.json 配置，來鏈接調試器：

{
「version」: 「0.2.0」,
「configurations」: [
{
「name」: 「Deno」,
「type」: 「node」,
「request」: 「launch」,
「cwd」: 「${workspaceFolder}」,
「runtimeExecutable」: 「deno」,
「runtimeArgs」: [「run」, 「–inspect-brk」, 「-A」, 「<entry_point>」],
「port」: 9229
}
]
}

注意：將 <entry_point> 替換爲實際的腳本名稱。

下面讓咱們來嘗試一下調試本地源文件，建立 server.ts：

import { serve } from 「https://deno.land/std@v0.50.0/http/server.ts」;
const s = serve({ port: 8000 });
console.log(「http://localhost:8000/」);

for await (const req of s) {
req.respond({ body: 「Hello World\n」 });
}

將 <entry_point> 改成 server.ts，而後運行。

不知道看完本篇文章後，小夥伴們對 Deno 有沒有產生興趣呢？若是有的話，歡迎小夥伴給我留言，後續我再來一篇使用 Deno 開發 Web API 的文章哈。

5、參考資源

Deno 中文手冊

the-deno-handbook

deno-first-approach

在這裏奉上一份學習線路圖

更多學習內容：請關注個人知乎專欄高級前端工程師前端學習教程,從基礎到進階,看完保證讓你的薪資上升一個臺階，你也能成爲阿里人（持續更新）