Skip to content

Latest commit

 

History

History
300 lines (216 loc) · 13.6 KB

publish-to-npm.mdx

File metadata and controls

300 lines (216 loc) · 13.6 KB
title description i18nReady
NPMに公開する
AstroコンポーネントをNPMに公開する方法を学びます
true

import { Steps } from '@astrojs/starlight/components'; import { FileTree } from '@astrojs/starlight/components';

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

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

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

:::tip[一人で進めるのは不安ですか？] コミュニティがサポートする、すぐに使えるテンプレートとしてAstroコミュニティのコンポーネントテンプレートをチェックしてください！ :::

クイックスタート

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

# 新しいディレクトリに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

パッケージの作成

:::note[必要知識] この章に入る前に、以下の基本的なことを理解しておくとよいでしょう：

新しいパッケージを作成するには、プロジェクト内で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"]
}

:::tip キーワードはインテグレーションライブラリでも使用されています！NPMで検索するキーワードの一覧は以下をご覧ください。 :::

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に参加してください！)

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

1. `demo/src/pages`ディレクトリにテスト用の`fixtures`ディレクトリを追加します。

  1. 実行したいテストごとに新しいページを追加します。

  2. 各ページには、テストしたいコンポーネントの使用例を含めます。

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

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

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

:::tip インテグレーションの構築に助けが必要ですか？あるいは他のインテグレーション開発者と交流したいですか？Discordサーバーに専用の#integrationsチャンネルがあります。ぜひ挨拶に来てください！ :::

package.json データ

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

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

アバターはライブラリであなたのブランドを際立たせる素晴らしい方法です！パッケージを公開したら、アバターを添付してGitHubのイシューを作成してください。リストに追加します。

:::tip NPMから読み取った情報を上書きする必要がありますか？問題ありません！更新された情報を添えてイシューを作成してください。カスタムのname、description、homepageが使用されるようにします。 :::

カテゴリー

必須の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にメンションしてください！