首頁 > web前端 > js教程 > 主體

Deno中如何使用 Node 模組?

青灯夜游
發布: 2020-09-02 10:17:16
轉載
2393 人瀏覽過

Deno中如何使用 Node 模組?

儘管方法不是很好,但有時別無選擇。

Deno 是基於 Web 技術的伺服器端程式碼執行環境。

  • Node 使用 JavaScript 與 commonjs 模組,並將 npm/yarn 作為其套件管理器。 【影片教學推薦:node js教學 】
  • Deno 使用 Typescript 或 JavaScript, 以及現代的 javascript 導入語句。它不需要套件管理器。

想要導入deno 中的模組,應該透過URL 引用:

import { serve } from "https://deno.land/std/http/server.ts";
登入後複製

你可以在Deno 標準函式庫Deno 第三方模組列表中找到更多需要的模組,但是它們並不能滿足你所需要的一切。有時只能使用依賴 npm 生態所提供的模組。以下是從最方便到最繁瑣的一些方法:

1. 如果模組使用了 ES 模組的 import/export 語法。

你在 deno 中所使用的函式庫不一定要來自推薦的 Deno 包,它們可以來自任何 URL,只要它們用了 import 語法即可。透過 unpkg 直接從 npm 儲存庫內部存取這些檔案不失為一個好方法。

import throttle from https://unpkg.com/lodash@4.17.19/throttle.js
登入後複製

2. 如果模組本身沒有使用imports,但原始碼用到了

#如果是透過npm 編譯的模組,或使用了錯誤格式的模組,那麼是否使用其原始碼可能需要一些運氣。許多流行程式庫的原始程式碼已經從 commonjs 遷移到了符合標準的 ES 模組的 import 語法。

有些軟體包有單獨的src/dist/ 目錄,其中ES 模組風格的程式碼位於src/ 中,但npm中並未將其包含在軟體包中。在這種情況下,你可以直接從來源匯入。

import throttle from "https://raw.githubusercontent.com/lodash/lodash/master/throttle.js";
登入後複製

可以透過點擊 github 上的 “raw” 按鈕來得到這個 URL,進而取得原始的 JS 檔案。使用 github cdn 或查看文件是否可以透過 github 頁面進行訪問,這樣更直接,但卻是可行的。

特別注意: 有些函式庫將ES 模組與webpack 一起使用,或使用模組載入器,讓它們可以從Node 模組中導入,如下所示:

//不好的用法:
import { someFunction } from "modulename";
import { someOtherFunction } from "modulename/file.js";
登入後複製

標準的導入方法是,要以./ 開頭或是一個可以正常工作的URL:

//标准的用法:
import { someOtherFunction } from "./folder/file.js";
登入後複製

不過你也可以嘗試下一個方法:

3. 導入commonjs 模組

幸運的是,有一個名為JSPM 的服務,它能夠解析第三方模組並對commonjs 模組進行編譯來用作ES 模組導入。此工具可用於在瀏覽器中使用 Node 模組,而無需建置步驟。但是我們也可以在這裡用到它。

在我最近的專案中,想進行推播通知,其中涉及產生VAPID 的憑證,有一個可以加密的deno 密碼庫,但是整個開發過程很困難,我寧願使用流行的web -push 函式庫。可以用 JSPM CDN 和如下 URL 進行導入:

import webPush from "https://dev.jspm.io/web-push";
登入後複製

這樣可以在 deno 中像使用其他任何模組一樣去使用它。

讓 Typescript 類型能夠正常運作

在 deno 中使用 typecipt 有一個不錯的功能,就是很容易能夠為模組提供了非常完美的自動補全功能。如果編輯器的 deno 擴充知道類型定義,它甚至可以自動補全第三方模組。

儘管這對程式碼是否能夠正常運作不是必要的,但是可以幫你很好的維護程式碼。

在我導入另一個名為fast-xml-parser 的模組時,我注意到它有一個類型定義檔是以.d.ts 結尾的。這些檔案描述了各種接口,甚至適用於 JavaScript.js 檔案。有時你也可以在 @types\somemodule 儲存庫中找到類型定義檔。

例如:https://github.com/Definitely...

#透過這個檔案 typescript 可以自動完成從 JavaScript 檔案匯入的內容。即使對於用JSPM 導入的檔案也是如此:

// 导入 fast-xml-parser 库
import fastXMLParser from "https://dev.jspm.io/fast-xml-parser";
// 从 fast-xml-parser 的源代码导入类型定义文件
import * as FastXMLParser from "https://raw.githubusercontent.com/NaturalIntelligence/fast-xml-parser/master/src/parser.d.ts";
//将 parser 与以下类型一起使用
const parser = fastXMLParser as typeof FastXMLParser;
登入後複製

我從定義檔中將類型定義匯入為FastXMLParser(請注意是大寫的F),它不包含任何有效程式碼,但這是一個與我們要導入的程式碼具有相同類型的物件。

我從 JSPM 中將程式碼匯入為 fastXMLParser(小寫字母 f),這是有效的程式碼,但沒有類型。

接下來,把它們組合在一起來創建 parser,即 FastXMLParser 類型的 fastXMLParser

最後希望你能試試看deno。 Deno 能夠使用任何一種用於 Web 甚至是用於 node/npm 的模組,確實為這個新的伺服器端庫生態奠定了良好的基礎。 

更多程式相關知識,可存取:程式設計教學! !

以上是Deno中如何使用 Node 模組?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!