用 Extension.js 開發 Deno 專案

​

用 Deno 建立專案

deno run -A npm:extension@latest create my-extension --template=react

cd my-extension
deno task dev

​

主要模式：deno.jsonc 就是專案 manifest

• 樣板的相依套件會以 npm: specifier 的形式進入 imports，由 deno install 負責解析。
• extension 引擎本身也宣告在那裡，形式為 npm:extension@<version>。
• nodeModulesDir 會設為 "auto"，因此 npm: 相依套件會落在一個真實的 node_modules 資料夾裡。bundler 在 dev 與 build 時都從那裡解析專案相依套件。
• deno task <name> 也會到 node_modules/.bin 尋找執行檔，所以產生出來的 task 執行的是本機安裝的 Extension.js CLI。

{
  "imports": {
    "react": "npm:react@^19.0.0",
    "react-dom": "npm:react-dom@^19.0.0",
    "extension": "npm:extension@^4.0.0"
  },
  "nodeModulesDir": "auto",
  "tasks": {
    "dev": "extension dev",
    "build": "extension build"
  }
}

​

伴隨模式：deno.jsonc 與 package.json 並存

​

工具鏈如何偵測 Deno

• Extension.js 在掃描專案相依套件時會讀取 deno.jsonc 或 deno.json。框架、CSS 與 TypeScript 的偵測都看得到 imports 透過 npm: specifier 宣告的套件。
• 當兩份 manifest 宣告了同一個套件時，以 package.json 中的項目為準。
• 一個專案要算是由 Deno 管理，必須擁有 deno.lock，或是有一份 Deno 設定檔且旁邊沒有 package.json。對混合式專案而言，npm 家族的 lockfile 優先；而且只有當 deno 執行檔位於你的 PATH 上時，才會認定為 Deno。

​

Deno 專案中的 TypeScript

​

下一步

• 了解 Extension.js 如何處理 Node API。
• 進一步了解如何管理 extension 設定。