のカスタムフックのNPMパッケージを作成して発行する

この記事では、どのように作成することができますし、カスタムのフックの独自のNPMパッケージを発行することを通じて反応JSで歩いていきます.
この記事の主な目的は、独自のNPMパッケージを作成し、すべてのパッケージがホストされているNPMレジストリにそれを公開する方法を学ぶことです.私たちは、ハイエンドのパッケージを作成するつもりはありませんが、この記事で説明されていることを読んで、実装した後に、あなたはあなたの反応アプリケーションでそれを使用するために現実の世界と管理されたNPMパッケージを作成するのに良いです.

必要条件

ノード.JSローカルマシンにインストールされています.インストールされていない場合は、ダウンロードしてインストールするには、このlinkを使用してください.

は、NPMレジストリで作成されるアカウントを持っています.既にない場合は、sign-upにこのリンクを使用します.

Gitバージョン管理ツールをローカルマシンにインストールします.(オプション)

初期設定

プロジェクトのフォルダを作成し、以下のコマンドを実行します.npm initすべての必要な情報を入力し、Enterキーを押します.これはパッケージを作成します.ディレクトリ内のJSON.

パッケージのインストール

パッケージに関する依存関係を追加する必要があります.明らかに我々は反応のカスタムフックを作成し、我々は反応し、DOMパッケージを反応する必要があります.それで、それをインストールするか、手動でパッケージの中にパッケージを加えることができます.JSONnpm install react react-dom
注意:上記のコマンドを使用してパッケージをインストールするとき、依存関係の下で依存関係が追加されます.上記の依存関係は必須であり、すべてのプロジェクトでのパッケージのインストール前にインストールする必要がありますので、依存関係を変更する必要があります.これは、これらの依存関係をカスタムフックパッケージをインストールする前にインストールする必要があることを意味します.
修正パッケージ.JSONは次のようになります.

コードを書く

今、私たちは1つのJSファイルを作成します.我々のディレクトリの中のJSと我々が使用点としてエントリポイントに言及した点に注意してください.パッケージ内のJS.JSON複数のJSファイルを持っているなら、良い練習です.エントリポイントとしてjsとインデックス内のすべてのファイルをインポートします.js
しかし、我々のケースでは、我々は単純なフックを作成しているので、私たちは一つのJSファイルを必要とするでしょう.
我々は、アクティブと非アクティブとしてボタンの状態を切り替えるために使用されるフックを作成しています.また、フックの内部のデフォルト状態を渡す機能もあります.
私たちのカスタムフックを作成できます.

import React, { useState } from "react";

function useReactToggle(active = false) {
  const [isActive, setIsActive] = useState(active);
  return [isActive, setIsActive];
}

export default useReactToggle;

NPMリポジトリへの公開

NPMリポジトリに以下のコマンドを使用してログインします.npm loginユーザー名、パスワード、メールIDを入力します.

では、以下のコマンドを入力してください.npm publish上記コマンドの実行が成功した後、NPMリポジトリでパッケージを入手し、パッケージの発行状況に関するメールを受け取ります.

あなたのパッケージをテストします

単純な反応アプリケーションを作成し、NPMコマンドを使用してパッケージをインストールします.npx create-react-app test-applicationカスタムフックパッケージをインストールします.npm i use-react-toggleそして、最後に我々のカスタムフックアプリをインポートします.jsコンポーネント.

import logo from "./logo.svg";
import "./App.css";
import useReactToggle from "use-react-toggle";

function App() {
  const [IsOn, setIsOn] = useReactToggle(true);
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <button
          style={{ width: "300px", height: "60px" }}
          onClick={() => setIsOn((IsOn) => !IsOn)}
        >
          State: {`${IsOn}`}
        </button>
      </header>
    </div>
  );
}

export default App;

「プロジェクトの起動」ボタンをクリックします.npm start
トグルボタンが期待通りに動作している!🎉
すごい!😍, 我々は正常に作成し、当社の最初の反応のカスタムプラグインを公開し、別のプロジェクトで使用している.

Please do share your feedback and experiences with NPM package publication in the comments section below. I’d love to see what you come up with!

場合は、この記事は、お友達や同僚と共有してください有用な発見!❤️
フォローミーオン⤵️
🌐