Create反応ライブラリを使っているNPMにカスタム反応コンポーネントを発表する方法

元来my personal blog
反応でプロジェクトを開発した後.しばらくの間、私は私が別のプロジェクトで使用する私自身のカスタムコンポーネントのいくつかに気づいた.今まで、「良いol」コピーペーストメソッドを使用して、プロジェクト間でこれらのコンポーネントを共有しました.しかし、現在、私は私自身のコンポーネントをnpmに発表して、それから私のプロジェクトにそれらを輸入するのに十分年をとっていると思います.
だから、数時間のインターネットをブラウズした後、私の反応コンポーネントを公開しようとして“ハードウェイ”(マニュアルWebpackとBabelの設定など)、私は偉大なツールを見つけました
create-react-library -簡単に再利用可能な反応ライブラリを作成するためのCLI.このパッケージの助けを借りて、私は自分のカスタム反応コンポーネントを高速かつ無痛を公開しました.

必要条件

私は、あなたがNPMパッケージを作るつもりならば、あなたは既にノードとNPMをインストールしたと仮定します.そうでなければ、ダウンロードしてhereからインストールできます.
また、NPMのアカウントが必要です.それを持っていない場合は、hereにサインアップしてください.
NPMモジュールを作り始めましょう!
まず最初に、あなたのパッケージの名前を思いついて、それが利用可能であることを確認する必要があります.https://www.npmjs.com/に行って、検索バーを通してそれをチェックしてください.
端末を開いてディレクトリに移動し、パッケージを作成し、次のコマンドを入力します.

npx create-react-library <name of your package>

私のカスタムProgress Bar React componentを発表するつもりです.そこでコマンドを入力します.

npx create-react-library react-pg-bar

あなたのパッケージについていくつかの質問をするよう求められます.答えはこちら

パッケージ名として
プログレスバーを反応させる.いわゆるscoped packageである.@を追加することによって、あなたのパッケージをグループ化することができて、また、すでにとられるかもしれないどんなパッケージ名も使用できます.
作成したライブラリの終了後、モジュールのスケルトンを作成します.

このプロジェクトには、srcフォルダの「example」コンポーネントと、そのサンプル例のショーケースが含まれます.しかし、それの主な美しさは、NPMへの出版のためのすべての必要な構成が既にあなたのために行われます.
CREATE - RESORTライブラリのドキュメントで推奨されるように、2つのターミナルウィンドウ(またはタブ)を開く方が良いです.最初に、Rollupを起動してsrc/modulesを見てください.

cd <your_folder_name> && npm start

番目の1つでは、モジュールのローカルバージョンにリンクされているサンプル/CREATEアプリを実行します.

cd <your_folder_name>
cd example && npm start

サンプルコンポーネントは次のようになります.

コンポーネントのコードを追加するフォルダはsrcです.サンプルコンポーネントのコードをインデックスに置き換えます.私の進行中のバーコンポーネントのコードのJSファイル.

import React from "react";

const ProgressBar = props => {
  const { bgcolor, completed } = props;

  const containerStyles = {
    height: 20,
    width: "100%",
    backgroundColor: "#e0e0de",
    borderRadius: 50,
    margin: 50
  };

  const fillerStyles = {
    height: "100%",
    width: `${completed}%`,
    backgroundColor: bgcolor,
    transition: "width 1s ease-in-out",
    borderRadius: "inherit",
    textAlign: "right"
  };

  const labelStyles = {
    padding: 5,
    color: "white",
    fontWeight: "bold"
  };

  return (
    <div style={containerStyles}>
      <div style={fillerStyles}>
        <span style={labelStyles}>{`${completed}%`}</span>
      </div>
    </div>
  );
};

export default ProgressBar;

私がスタイルのために別々のCSSモジュールを使用しないので、私はスタイルを削除することができます.モジュールです.CSSファイル.もちろん、使用するファイルを構成するコンポーネントによって異なります.SRC/Indexであなたのコンポーネント(あなたのモジュールをエクスポートしている)のエントリポイントを維持してください.jsファイル.
次に、コンポーネントが動作していることをテストしなければなりません.そのために、/src/appの例に行きます.JSとあなたのコンポーネントを示すアプリケーションのコードにコードを置き換える.これは私のデモアプリケーションのコードです.

import React, { useState, useEffect } from "react";

import ProgressBar from "@ramonak/react-progress-bar";
import "@ramonak/react-progress-bar/dist/index.css";

const App = () => {
  const [completed, setCompleted] = useState(0);

  useEffect(() => {
    setInterval(() => setCompleted(Math.floor(Math.random() * 100) + 1), 2000);
  }, []);

  return (
    <div className="App">
      <ProgressBar bgcolor={"#6a1b9a"} completed={completed} />
    </div>
  );
};

export default App;

注意してください、それを作成するアプリケーションを自動的にあなたのパッケージ(インポートコンポーネントの名前を変更することを忘れないでください)のインポートを作成し、スタイル(私はスタイルの別のファイルを持っていないので、私はこのインポートを削除することができます).したがって、手動でローカルパッケージをテストしてリンクを作成する必要はありません.
ブラウザを開き、デモアプリケーションを参照してください

あなたがパブリックを作成して、ちょうどあなた自身でパッケージを使うつもりでないならば、あなたは以下のパートをスキップすることができて、Publishingにまっすぐ進むことができます
しかし、パッケージが公開されている場合、他の開発者がそれを使用することができることを意味し、その後、我々は出版前に世話をする必要がありますいくつかの他のものがあります.
パブリックパッケージのユーザビリティの最も重要な基準の一つがそのドキュメントです.だからREADMEを編集します.プロジェクトのルートのmdファイル.デフォルトでは、必要最小限の情報が追加されます.パッケージのインストールと使用方法.あなたがそこになければならないと思うものは何でもそこに加えてください.公開されたNPMパッケージのトンがあるので、ReadMeテンプレートの配列はかなり大きいです.
また、NPXの作成反応ライブラリを実行中に提供されているGithubレポにコードをプッシュすることを忘れないでください.
そして、あなたのコンポーネントを公開するデモページを持っているのはクールです.これを行う最も簡単な方法は、例/アプリからあなたのアプリケーションを公開することです.JGTUUBページへのJS

npm run deploy

とライブラリを作成するすべての作業を行います.

出版

さて、最後にNPMにコンポーネントを公開しましょう.ジャストラン

npm publish

スコープスコープのパッケージを公開しているが、パブリックアクセスをしたい場合は

npm publish --access=public

そして、それ!すべてが計画通りに行くならば、あなたはあなたの構成要素がNPMに首尾よく出版された電子メール通知を得ます.

結論

あなたが見ることができるように、NPMにあなたのパッケージを公開することは本当に反応するライブラリのような素晴らしいツールを使用して簡単です.
の完全なソースコード
/プログレスバーのコンポーネントはthis GitHub repoです.公開されたNPMパッケージはhereです.