npmパッケージの作り方

あまりスマートな方法ではないですが、備忘録がてら。

前提

• React
• TypeScript
• npm

今回は TypeScript を用いた React にまつわるパッケージ開発を想定していますが、ベースとなるところは大体似たような感じで通用すると思います。

パッケージ開発用の環境は npx create-react-app use-hoge --template typescript --use-npm とかで作成すると良いと思います。

実装する

まず dependencies に入っているパッケージをすべて devDependencies に移動させます。

次にエントリーポイントとなるファイルを適当に切って実装を書いていきます。

呼び出し側で import させたいものについては export や default export などを付与していきましょう。

例としては以下のような感じかと。

export type Hoge = {
  fuga: string;
};

const useHoge = ({ fuga }: Hoge) => {
  useEffect(() => {
    console.log(fuga);
  }, [fuga]);
};

default export useHoge;

ビルドする

Create React App の場合 npm run build を叩いてしまうとサイトのほうのビルドが走ってしまうため、別でビルド用のスクリプトを追加する必要があります。

また元の tsconfig.json ファイルもサイト用のファイルなので、別で作成する必要があります。

そのためまず tsconfig.package.json とかを作成します、内容はよしなにお願いします。

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["es2017", "dom"],
    "module": "commonjs",
    "moduleResolution": "node",
    "newLine": "lf",
    "outDir": "dist",
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "strictNullChecks": false,
    "target": "es5"
  },
  "include": ["src/index.tsx"]
}

次に package.json にスクリプトを追加します。

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    // 追加
    "build:package": "rm -rf dist && tsc -p tsconfig.package.json"
  }
}

最後に npm run build:package でビルドを実行すると、dist フォルダーが生成されると思います。

公開する

まず package.json に出力したモジュールのエントリーポイントを追加します。

{
  "main": "dist/index.js",
  "module": "dist/index.js",
  "types": "dist/index.d.ts"
}

新しい npm パッケージを公開する場合はバージョンの修正は不要ですが、パッケージの更新の場合はバージョンを上げましょう。

{
  "version": "0.1.1"
}

最後に npm publish を叩けば公開されます。

Create React App で作る場合、作成したパッケージのサンプルを同梱させることが容易にできるためとても便利です。

多くの場合は gh-pages を追加して GitHub Pages でサンプルを上げるケースが多いと思われます。

繰り返しになりますが、上記は全体的にあまりスマートな方法ではないので、フローはどんどん改善していただければと思います。