React.JS で NPM パッケージを作成する

この記事では、React.js アプリケーションの npm パッケージを作成して公開するプロセスについて説明します。

まず、次のコマンドを実行します:

npx create-react-library react-loader

これにより、基本的な React.js アプリケーション/パッケージが生成されます。コマンドを実行すると、次のようなプロジェクト構造が表示されます。

src フォルダーに、index.js ファイルがあります。

index.js ファイル内にライブラリ コンポーネントを直接作成するか、次のように src フォルダーに新しいコンポーネント ファイルを作成して、index.js ファイルからエクスポートすることができます。

コンポーネントに CSS を使用している場合は、必ずそれをコンポーネント ファイルにインポートしてください。

次に、プロジェクト内に dist フォルダーがある場合は、それを削除します。コンポーネントが正しく機能しているかどうかをテストするには、example/src フォルダーに移動します。

App.js ファイルで、ここに示すようにコンポーネントをインポートします。これは、このライブラリを npm パッケージとして他のプロジェクトに含める場合に使用するのと同じアプローチです。

アプリを実行するには、次のコマンドを実行します:

cd 反応ローダー && npm start
cd 反応ローダー/例 && npm start

ライブラリをテストしたら、公開します。

プロジェクトのリポジトリをすでに設定している場合は、最終的な変更をプッシュするだけです。それ以外の場合は、新しいリポジトリを作成し、変更をプッシュします。

プロジェクトのルートに .npmignore ファイルを作成する必要もあります。このファイルは、NPM の .gitignore ファイルと同様に機能します。これにより、特定のファイルとフォルダー (node_modules、.git、.gitignore など) が NPM レジストリに公開されなくなります。

変更をプッシュした後、コマンド npm login を実行します。ブラウザで NPM を開くように求められます。ここでアカウントにログインするか、アカウントをお持ちでない場合はサインアップできます。次に、npm public を実行します。これにより、package.json ファイルで指定されたバージョンで dist フォルダーが NPM に公開されます。

パッケージが公開されると、NPM Web サイトでパッケージ名を検索するか、プロフィールにアクセスしてパッケージを表示できます。そこにはすべてのパッケージがリストされています。

フォローして詳細を確認してください。ここで私を見つけることができます

以上がReact.JS で NPM パッケージを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。