typescript:deno:preact

目次

Preact アプリを構築する

公式: Astroのインストールとセットアップ | Docs
　@astrojs/preact | Docs

インストール

公式: Astroのインストールとセットアップ | Docs
参考: Build and Ship Astro Sites with Deno and Deno Deploy 翻訳
🚀 Astro + 🦕 Deno Template でインストールする🤔

$ deno run -A npm:create-astro@latest -- --template denoland/deno-astro-template



 astro   Launch sequence initiated.

   dir   Where should we create your new project?
         ./second-shepherd


   dir   Where should we create your new project?
         ./preact-haruo-world_astro
      ◼  tmpl Using minimal as project template

  deps   Install dependencies? (recommended)
         ● Yes  ○ No


  deps   Install dependencies?
         Yes

   git   Initialize a new git repository? (optional)
         ○ Yes  ● No


  git   Initialize a new git repository?
         No
      ◼  Sounds good! You can always run git init manually.

 ██████  Project initializing...
         ■ Template copied
         ▶ Dependencies installing with deno...


      ✔  Project initialized!
         ■ Template copied
         ■ Dependencies installed

  next   Liftoff confirmed. Explore your project!

         Enter your project directory using cd ./preact-haruo-world_astro 
         Run npm run dev to start the dev server. CTRL+C to stop.
         Add frameworks like react or tailwind using astro add.

         Stuck? Join us at https://astro.build/chat

╭─────╮  Houston:
│ ◠ ◡ ◠  Good luck out there, astronaut! 🚀
╰─────╯

@astrojs/preact | Docs
deno で Astro を最新に更新し、Preact などのフレームワークを追加する…🤔

$ cd preact-haruo-world_astro
$ deno add --allow-scripts npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact


Add npm:astro@5.6.1
Add npm:@deno/astro-adapter@0.3.0
Add npm:@astrojs/preact@4.0.8
Add npm:preact@10.26.5

package.json の内容…🤔

$ bat -p --pager no package.json


{
  "name": "preact-haruo-world-astro",
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "dev": "deno run -A --unstable-kv npm:astro dev",
    "start": "deno run -A --unstable-kv npm:astro dev",
    "build": "astro build",
    "preview": "deno run -A ./dist/server/entry.mjs",
    "format": "deno fmt && prettier --write ."
  },
  "dependencies": {
    "@astrojs/preact": "^4.0.8",
    "@deno/astro-adapter": "^0.3.0",
    "astro": "^5.6.1",
    "preact": "^10.26.5"
  },
  "devDependencies": {
    "prettier": "^3.3.1",
    "prettier-plugin-astro": "^0.14.0"
  },
  "prettier": {
    "tabWidth": 2,
    "plugins": [
      "./node_modules/prettier-plugin-astro/dist/index.js"
    ],
    "overrides": [
      {
        "files": "*.astro",
        "options": {
          "parser": "astro"
        }
      }
    ]
  }
}

Deno ランタイム機能を使用する設定

公式: Unstable feature flags - Deno Documentation

$ nano package.json


{
  "name": "preact-haruo-world-astro",
  "type": "module",
  "version": "1.0.0",
  "scripts": {
    "dev": "deno run -A --unstable-kv npm:astro dev",                                                             
    "start": "deno run -A --unstable-kv npm:astro dev",                                                           
    "build": "astro build",
    "preview": "deno run -A ./dist/server/entry.mjs",
    "format": "deno fmt && prettier --write ."
  },

プロジェクト実行

$ deno run dev


Task dev astro dev
09:22:49 [ERROR] [config] The adapter @deno/astro-adapter does not currently support the feature "sharp". Your project may not build correctly.
09:22:49 [types] Generated 2ms
09:22:49 [content] Syncing content
09:22:49 [content] Synced content

 astro  v5.6.1 ready in 408 ms

┃ Local    http://localhost:4321/
┃ Network  use --host to expose

09:22:49 watching for file changes...

2025/04/08 現在 @deno/astro-adapter@0.3.0 は Astro 5 に対応中…😅
AstroサイトをDenoにデプロイする | Docs
Is Astro 5 supported? · Issue #40 · denoland/deno-astro-adapter

Task dev astro dev
09:22:49 [ERROR] [config] The adapter @deno/astro-adapter does not currently support the feature "sharp". Your project may not build correctly.

動作確認🤔
http://localhost:4321/

Astro Preact 001

トラブルシューティング

deno でのパッケージ追加の仕方が誤っている…😅
deno add でパッケージ追加するのが正しい🤔

$ deno run -A npm:astro add preact


✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────╮
 │ deno add @astrojs/preact@^4.0.7 preact@^10.26.4  │
 ╰──────────────────────────────────────────────────╯

? Continue? › (Y/n)


✔ Continue? … yes
✖️ Installing dependencies...

 The command `deno add @astrojs/preact@^4.0.7 preact@^10.26.4` exited with code 1 

Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
  Location:
    /home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31
  Stack trace:
    at add (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31)
    at processTicksAndRejections (ext:deno_node/_next_tick.ts:59:10)
    at eventLoopTick (ext:core/01_core.js:185:21)
    at async cli (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/index.js:175:5)

これも誤り…😢

$ deno run -A npm:add @astrojs/preact


Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:sharp@0.33.5
┃
┠─ This may cause the packages to not work correctly.
┠─ Lifecycle scripts are only supported when using a `node_modules` directory.
┠─ Enable it in your deno config file:
┖─ "nodeModulesDir": "auto"
error: Failed resolving binary export. '/home/tomoyan/.cache/deno/npm/registry.npmjs.org/add/2.0.6/package.json' did not have a bin property

これも誤り…😭

$ cat << 'EOF' > deno.json
{
  "nodeModulesDir": "auto"
}
EOF


$ deno run -A npm:astro add preact


✔ Resolving packages...

  Astro will run the following command:
  If you skip this step, you can always run it yourself later

 ╭──────────────────────────────────────────────────╮
 │ deno add @astrojs/preact@^4.0.7 preact@^10.26.4  │
 ╰──────────────────────────────────────────────────╯

? Continue? › (Y/n)


✔ Continue? … yes
✖️ Installing dependencies...

 The command `deno add @astrojs/preact@^4.0.7 preact@^10.26.4` exited with code 1 

Astro could not update your astro.config.js file safely.
Reason: Unable to install dependencies

You will need to add these integration(s) manually.
Documentation: https://docs.astro.build/en/guides/integrations-guide/
  Location:
    /home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31
  Stack trace:
    at add (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/add/index.js:217:31)
    at processTicksAndRejections (ext:deno_node/_next_tick.ts:59:10)
    at eventLoopTick (ext:core/01_core.js:185:21)
    at async cli (file:///home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/astro@5.5.5/node_modules/astro/dist/cli/index.js:175:5)

これも誤り…😇

$ deno run -A npm:add @astrojs/preact


error: Failed resolving binary export. '/home/tomoyan/my_projects/preact-haruo-world_astro/node_modules/.deno/add@2.0.6/node_modules/add/package.json' did not have a bin property

エラー： @astrojs/preact にプレフィックスがありません。 `deno add npm：@astrojs/preate`を意味しましたか？🤔

$ deno add @astrojs/preact


error: @astrojs/preact is missing a prefix. Did you mean `deno add npm:@astrojs/preact`?

deno add --allow-scripts でパッケージに npm: プレフィックスを付けて実行しなおす😉

$ deno add --allow-scripts npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact


Add npm:astro@5.6.1
Add npm:@deno/astro-adapter@0.3.0
Add npm:@astrojs/preact@4.0.8
Add npm:preact@10.26.5

警告: 次のパッケージには、実行されなかったNPMライフサイクルスクリプトが含まれていました...🤔

$ deno add npm:@astrojs/preact
Add npm:@astrojs/preact@4.0.7
Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:sharp@0.33.5
┃
┠─ This may cause the packages to not work correctly.
┖─ To run lifecycle scripts, use the `--allow-scripts` flag with `deno install`:
   deno install --allow-scripts=npm:sharp@0.33.5

deno add --allow-scripts で実行しなおす😉

$ deno add --allow-scripts npm:astro npm:@deno/astro-adapter npm:@astrojs/preact npm:preact


Add npm:astro@5.6.1
Add npm:@deno/astro-adapter@0.3.0
Add npm:@astrojs/preact@4.0.8
Add npm:preact@10.26.5

これにより、パッケージが正しく機能しない可能性があります。`node_modules` ディレクトリを使用する場合にのみ、ライフサイクルスクリプトはサポートされます...🤔

$ deno run -A npm:@astrojs/upgrade


Warning The following packages contained npm lifecycle scripts (preinstall/install/postinstall) that were not executed:
┠─ npm:esbuild@0.15.18
┠─ npm:esbuild@0.17.19
┃
┠─ This may cause the packages to not work correctly.
┠─ Lifecycle scripts are only supported when using a `node_modules` directory.
┠─ Enable it in your deno config file:
┖─ "nodeModulesDir": "auto"

 astro   Integration upgrade in progress.

      ◼  @astrojs/preact is up to date on v4.0.8
      ▲  astro will be updated  from v4.9.3 to v5.6.1 

  wait   One package has breaking changes. Continue?
         Yes

--node-modules-dir オプションを付けて実行する、または、deno.json を設定する🤔

$ deno run -A --node-modules-dir npm:@astrojs/upgrade

Or 

$ cat << 'EOF' > deno.json
{
  "nodeModulesDir": "auto"
}
EOF

エラーの依存関係がインストールに失敗しました。次のコマンドを手動で実行してください。deno astro@5.6.1 を追加します...🤔

deno では @astrojs/upgrade ができない😢

$ deno run -A --node-modules-dir npm:@astrojs/upgrade



 astro   Integration upgrade in progress.

      ◼  @astrojs/preact is up to date on v4.0.8
      ▲  astro will be updated  from v4.9.3 to v5.6.1 

  wait   One package has breaking changes. Continue?
         Yes

 check   Be sure to follow the CHANGELOG.
         astro Upgrade to Astro v5

 ██████  Installing dependencies with deno...

      ▲  error Dependencies failed to install, please run the following command manually:
deno add astro@5.6.1

deno add --allow-scripts npm:astro で追加すれば更新できる😉

$ deno add --allow-scripts npm:astro


Add npm:astro@5.6.1

参考文献

Build an Astro site with Deno
Build and Ship Astro Sites with Deno and Deno Deploy
Deploy your Astro Site with Deno | Docs
denoland/deno-astro-adapter: A Deno adapter for running Astro applications on the Deno runtime.
Is Astro 5 supported? · Issue #40 · denoland/deno-astro-adapter

  • typescript/deno/preact.txt
  • 最終更新: 2025/04/21 04:29
  • by ともやん