URL Import
在我們學習完 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/[email protected]/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 出來比較一番,真的十分有趣(?)。

使用 Map 集中第三方模組

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

範例

  • import_map.json
{
"imports": {
"fmt/": "https://deno.land/[email protected]/fmt/"
}
}
  • color.ts
import { red } from "fmt/colors.ts";
console.log(red("hello world"));
在運行程式碼時,需加入 --importmap= 旗標,像是:
deno run --importmap=import_map.json --unstable color.ts

目前限制

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

設定映射位置

{
"imports": {
"/": "./"
}
}
使用:
import { MyUtil } from "/util.ts";
或是:
{
"imports": {
"/": "./src"
}
}

從 URL 導入數據

請先參考 Data URLs 的使用方式。
先考慮以下程式碼:
export const a = "a";
export enum A {
A,
B,
C,
}
上面的程式碼可以被表達成以下形式:
"data:application/typescript;base64,ZXhwb3J0IGNvbnN0IGEgPSAiYSI7CgpleHBvcnQgZW51bSBBIHsKICBBLAogIEIsCiAgQywKfQo="
在JavaScript 中,要在編碼結果前加上 data:application/javascript;base64,yourContent
import * as a from "data:application/typescript;base64,ZXhwb3J0IGNvbnN0IGEgPSAiYSI7CgpleHBvcnQgZW51bSBBIHsKICBBLAogIEIsCiAgQywKfQo=";
console.log(a.a);
console.log(a.A);
console.log(a.A.A);
執行結果:
deno run https://deno.land/posts/v1.7/import_data_url.ts
a
{ "0": "A", "1": "B", "2": "C", A: 0, B: 1, C: 2 }
0

延伸閱讀

同樣的事情在不同人眼中可能會有不同的見解、看法。
在讀完本篇以後,筆者也強烈建議大家去看看以下文章,或許會對型別、變數宣告...等觀念有更深層的看法唷!
  • PJ 大的筆記非常的清楚、易懂,這篇詳細介紹 ES Modules 的筆記也推薦讀者一同觀看。