NPMに公開する

新しいAstroコンポーネントを作成していますか？ npmに公開しましょう！

Astroコンポーネントを公開することは既存の作業を複数のプロジェクトで再利用し、より広いAstroコミュニティと共有するための素晴らしい方法です。AstroコンポーネントはNPMに直接公開でき、他のJavaScriptパッケージと同じようにインストールできます。

インスピレーションをお探しですか？Astroコミュニティのお気に入りのテーマやコンポーネントをご覧ください。また、npmを検索して、公開されているカタログ全体を確認することもできます。

クイックスタート

すでにセットアップされたテンプレートを使用することでコンポーネントの開発をすぐに始めることができます。

# 新しいディレクトリにAstroコンポーネントのテンプレートを初期化する
npm create astro@latest my-new-component-directory -- --template component
# yarn
yarn create astro my-new-component-directory --template component
# pnpm
pnpm create astro@latest my-new-component-directory -- --template component

パッケージの作成

新しいパッケージを作成するには、プロジェクト内でworkspacesを使用するように開発環境を設定します。これにより、Astroの作業用コピーと一緒にコンポーネントを開発できるようになります。

ディレクトリmy-new-component-directory/
- ディレクトリdemo/
  - … テストとデモのためのディレクトリ
- package.json
- ディレクトリpackages/
  - ディレクトリmy-component/
    index.js
    package.json
    … パッケージで使用される追加のファイル

この例では、my-projectという名前のプロジェクトに、my-componentという単一のパッケージと、コンポーネントのテストとデモ用のdemo/ディレクトリを作成します。

これはプロジェクトルートのpackage.jsonファイルで設定されます。

{
  "name": "my-project",
  "workspaces": ["demo", "packages/*"]
}

この例では、packagesディレクトリから複数のパッケージを一緒に開発できます。これらのパッケージは、Astroの作業用コピーをインストールできるdemoからも参照できます。

npm create astro@latest demo -- --template minimal
# yarn
yarn create astro demo --template minimal
# pnpm
pnpm create astro@latest demo -- --template minimal

個々のパッケージを構成する初期ファイルには、package.jsonとindex.jsの2つがあります。

`package.json`

パッケージディレクトリのpackage.jsonには、説明、依存関係、その他のパッケージメタデータなど、パッケージに関連するすべての情報が含まれています。

{
  "name": "my-component",
  "description": "Component description",
  "version": "1.0.0",
  "homepage": "https://github.com/owner/project#readme",
  "type": "module",
  "exports": {
    ".": "./index.js",
    "./astro": "./MyAstroComponent.astro",
    "./react": "./MyReactComponent.jsx"
  },
  "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"],
  "keywords": ["astro", "withastro", "astro-component", "...", "..."]
}

`description`

コンポーネントの機能を他の人に伝えるための簡単な説明です。

{
  "description": "An Astro Element Generator"
}

`type`

Node.jsとAstroがindex.jsファイルを解釈するために使用するモジュール形式です。

{
  "type": "module"
}

index.jsをimportとexportを使用したエントリーポイントとして使用できるように、"type": "module"を指定してください。

`homepage`

プロジェクトのホームページのURLです。

{
  "homepage": "https://github.com/owner/project#readme"
}

これはユーザーをオンラインデモ、ドキュメント、またはプロジェクトのホームページに誘導する素晴らしい方法です。

`exports`

名前でインポートされたパッケージのエントリーポイントです。

{
  "exports": {
    ".": "./index.js",
    "./astro": "./MyAstroComponent.astro",
    "./react": "./MyReactComponent.jsx"
  }
}

この例では、my-componentをインポートするとindex.jsが使用され、my-component/astroやmy-component/reactをインポートするとそれぞれMyAstroComponent.astroやMyReactComponent.jsxが使用されます。

`files`

npm経由でユーザーに配布されるバンドルから不要なファイルを除外するためのオプションの最適化です。ここにリストされたファイルのみがパッケージに含まれるため、パッケージの動作に必要なファイルを追加または変更する場合は、このリストを適宜更新する必要があります。

{
  "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"]
}

`keywords`

コンポーネントに関連するキーワードの配列で、他のユーザーがnpmでコンポーネントを見つけるのに役立ち、その他の検索カタログでも使用されます。

Astroエコシステムでの発見性を最大限に高めるために、特別なキーワードとしてastro-componentまたはwithastroを追加してください。

{
  "keywords": ["astro-component", "withastro", "... etc", "... etc"]
}

`index.js`

パッケージがインポートされるたびに使用されるメインのパッケージエントリーポイントです。

export { default as MyAstroComponent } from './MyAstroComponent.astro';

export { default as MyReactComponent } from './MyReactComponent.jsx';

これにより、複数のコンポーネントを1つのインターフェースにまとめてパッケージ化できます。

例: 名前付きインポートを使用する

---
import { MyAstroComponent } from 'my-component';
import { MyReactComponent } from 'my-component';
---
<MyAstroComponent />
<MyReactComponent />

例: 名前空間インポートを使用する

---
import * as Example from 'example-astro-component';
---
<Example.MyAstroComponent />
<Example.MyReactComponent />

例: 個別のインポートを使用する

---
import MyAstroComponent from 'example-astro-component/astro';
import MyReactComponent from 'example-astro-component/react';
---
<MyAstroComponent />
<MyReactComponent />

パッケージの開発

Astroには開発専用の「パッケージモード」はありません。代わりに、プロジェクト内でパッケージを開発およびテストするためのデモプロジェクトを使用する必要があります。これは開発専用のプライベートウェブサイトでも、パッケージのための公開デモ/ドキュメントウェブサイトでも構いません。

既存のプロジェクトからコンポーネントを抽出する場合でも、そのプロジェクトを使用して抽出したコンポーネントの開発を継続することができます。

コンポーネントのテスト

Astroは現在、テストランナーを提供していません。(この機能の開発に協力していただける方は、Discordに参加してください！)

当面のテストに関する推奨事項は以下の通りです。

demo/src/pagesディレクトリにテスト用のfixturesディレクトリを追加します。
実行したいテストごとに新しいページを追加します。
各ページには、テストしたいコンポーネントの使用例を含めます。
astro buildを実行してfixturesをビルドし、dist/__fixtures__/ディレクトリの出力を期待する結果と比較します。
- ディレクトリmy-project/demo/src/pages/__fixtures__/
  - test-name-01.astro
  - test-name-02.astro
  - test-name-03.astro

コンポーネントの公開

パッケージの準備ができたら、npm publishコマンドを使用してnpmに公開できます。失敗した場合は、npm loginでログインしているか、package.jsonが正しいかを確認してください。成功すれば完了です！

Astroパッケージにはbuildステップが不要であることに注目してください。 .astro、.ts、.jsx、.cssなどのAstroがネイティブにサポートするファイルタイプは、ビルドステップなしで直接公開できます。

Astroがネイティブにサポートしていない他のファイルタイプが必要な場合は、パッケージにビルドステップを追加してください。この高度な作業については、ご自身で対応していただく必要があります。

インテグレーションライブラリ

あなたの成果をインテグレーションライブラリに追加して、共有しましょう！

`package.json`データ

ライブラリは毎週自動的に更新され、astro-componentまたはwithastroキーワードを持つNPMに公開されているすべてのパッケージを取り込みます。

インテグレーションライブラリは、package.jsonからname、description、repository、homepageのデータを読み取ります。

アバターは、ライブラリ内でブランドをアピールするのに最適です！パッケージを公開したら、アバターを添付してGitHubのイシューを作成してください。リストに追加します。

カテゴリー

必須のastro-componentまたはwithastroキーワードに加えて、パッケージを自動的に整理するための特別なキーワードも使用されています。以下のキーワードのいずれかを含めると、インテグレーションライブラリの対応するカテゴリーにインテグレーションが追加されます。

カテゴリー	キーワード
アクセシビリティ	`a11y`, `accessibility`
アダプター	`astro-adapter`
アナリティクス	`analytics`
CSS + UI	`css`, `ui`, `icon`, `icons`, `renderer`
フレームワーク	`renderer`
コンテンツローダー	`astro-loader`
画像 + メディア	`media`, `image`, `images`, `video`, `audio`
パフォーマンス + SEO	`performance`, `perf`, `seo`, `optimization`
開発ツールバー	`devtools`, `dev-overlay`, `dev-toolbar`
ユーティリティ	`tooling`, `utils`, `utility`

カテゴリーに一致するキーワードを含まないパッケージは、Uncategorizedとして表示されます。

あなたの成果を共有することを推奨します。私たちは才能あるAstronautsが作るものを見るのが大好きです。Discordで私たちと共有するか、ツイートで@astrodotbuildにメンションしてください！

貢献するコミュニティスポンサー