iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 19
1
Modern Web

強型闖入DenoLand系列 第 19

強型闖入DenoLand[18] - TypeScript 和 Deno 的大小事(1)

Node.js之父新專案Deno 1.0正式亮相| iThome

強型闖入DenoLand[18] - TypeScript 和 Deno 的大小事(1)

在我們學習完 TypeScript 的基礎語法以及 Deno CLI 的基本操作後,本章要跟各位筆者分享的是如何在 TypeScript 中多檔開發和 Deno 特有的 url import 和 typescript 的制定選項。

進入正題

什麼是 ES Modules 呢?

ES Modules 是用來處理模組的 ECMAScript 標準,儘管 Node.js 最初是遵照 CommonJS 標準去實作 JS 的模組管控。但是近年來也隨著瀏覽器對於 JavaScript ES6 的支援度上升和 webpack 的崛起,就連 node.js 都開始支援 ES Modules , Deno 原生就遵照 ES Modules 也是可預期的事情。

匯出

// moduleA.ts
export const name = 'Ian';
export class People {
  // ...
}
export function sum(){
  // ...
}
export const errLog = ()=>{
  // ...
}

我們可以使用 export 將我們要用到的函式物件變數通通匯出。

匯入

有匯出就一定會有匯入,我們來看看要如何匯入上面的模組所匯出的變數吧!

// moduleB.ts
import { name, People, sum, errLog } from './moduleA.ts'
  • 知識點:解構賦值

    解構賦值是一項非常好用的技巧,我們也可以在大量的原始碼中看到它的身影,非常推薦大家學習。

注意:以上範例中的 moduleA.tsmoduleB.ts 必須放在同一個目錄/資料夾下才能正常匯入唷!

至於為什麼,各位筆者可以參考該連結

預設匯出 (export default)

若使用者只有單一變數、函式...等需要匯出,可以考慮使用預設匯出:

const sum = () => {
  // ...
};
export default sum;

匯入與剛才的方法大同小異:

import sum from './moduleA.ts'
sum();

如果筆者希望將多項東西統一匯出,而不是在單一模組中使用多次 export ,我們也可以利用 export default + 物件做到:

const name = 'Ian'; 
class People {
  // ...
}
function sum(){
  // ...
}
const errLog = ()=>{
  // ...
}
export default {
  name,
  People,
  sum,
  errLog,
};

匯入的話,這邊一樣用到解構賦值的技巧:

import { name, People, sum, errLog } from './moduleA.ts'

URL Import

URL Import 是 Deno 的一大特色,我們可以透過相同的語法將遠端的模組引入到我們的程式碼:

/**
 * remote.ts
 */
import {
  add,
  multiply,
} from "https://x.nest.land/ramda@0.27.0/source/index.js";

function totalCost(outbound: number, inbound: number, tax: number): number {
  return multiply(add(outbound, inbound), tax);
}

console.log(totalCost(19, 31, 1.2));
console.log(totalCost(45, 27, 1.15));
/**
 * Output
 *
 * 60
 * 82.8
 */

DenoLand

提到了 URL Import ,可能會有讀者好奇:那我要去哪邊找我需要的第三方套件呢?

這時, DenoLand 就派上用場啦~!

What is deno.land/x?

deno.land/x is a hosting service for Deno scripts. It caches releases of open source modules stored on GitHub and serves them at one easy to remember domain.

-- DenoLand

DenoLand 收錄並緩存了大量的第三方模組,筆者之前利用空閒時也有看到許多有趣的專案,其實 Deno 的第三方模組也越來越完全,真的很適合大家現在入坑呢 XDD

如果對於開源貢獻有興趣,現在挑坑 Deno 更是再好不過,因為在許多東西尚不完全時要參一腳協作是最容易的。

以 Linux Kernel 為例,數千萬行的程式碼就讓許多開發者望而卻步。講了這麼多,好 Deno ,不玩嗎?

問題: URL import 在斷網時還能用嗎?

這個問題也是筆者在第一次接觸 Deno 時所發出的疑問。

不用擔心, Deno 具有將模組緩存的機制。當第三方模組第一次被使用時, Deno 便會將它緩存到本地端,之後只要使用到相同的模組也會使用本地緩存的模組。

當然,如果想要更新本地緩存的第三方模組,可以使用 --reload 標籤達到使用者的需求。

這些問題的答案,筆者是在這裡找到的,在該教學的最後也不忘拿 Node.js 出來比較一番,真的十分有趣(?)。

10/15 更新: 使用 Map 集中第三方模組

我們可以將專案中使用到的第三方模組改用 MAP 進行管理。這樣一來,若有兩個檔案都使用到同一個第三方套件時,便無需重新輸入攏長的 Url 。

範例

  • import_map.json
{
   "imports": {
      "fmt/": "https://deno.land/std@0.74.0/fmt/"
   }
}
  • color.ts
import { red } from "fmt/colors.ts";

console.log(red("hello world"));

在運行程式碼時,需加入 --importmap=<FILE> 旗標,像是:

deno run --importmap=import_map.json --unstable color.ts

目前限制

  • 只能導入單一 Map
  • 沒有後備網址
  • Deno 不支援 std: 命名空間
  • 僅支持 file:http:https:

設定映射位置

{
  "imports": {
    "/": "./"
  }
}

使用:

import { MyUtil } from "/util.ts";

或是:

{
  "imports": {
    "/": "./src"
  }
}

題外話

話說, Deno 又發佈更新到 1.4.4 版本啦!上次看官方文件還停在 1.4.2 ,整個忽略掉 1.4.3 了呢 XDD

如果讀者想要更新你的 Deno 到最新版,請服用以下命令:

deno upgrede

今天的文章就到這邊結束,我們明天見 QQ

延伸閱讀

同樣的事情在不同人眼中可能會有不同的見解、看法。

在讀完本篇以後,筆者也強烈建議大家去看看以下文章,或許會對型別、變數宣告...等觀念有更深層的看法唷!

  • Deno Manual

  • PJ Chen 筆記

    PJ 大的筆記非常的清楚、易懂,這篇詳細介紹 ES Modules 的筆記也推薦讀者一同觀看。


上一篇
強型闖入DenoLand[17] - Sandbox in Deno
下一篇
強型闖入DenoLand[19] - TypeScript 和 Deno 的大小事(2)
系列文
強型闖入DenoLand37

尚未有邦友留言

立即登入留言