2021/11/30
はじめに
以前，npm パッケージを公開してみた．カスタムフックおよびコンポーネントのどちらとも公開したので，「ある程度汎用性がある方法なのでは？」と思い，現状の構成を晒しておく．
構成
パッケージを利用する際に開発元のサンプルが必要なことは往々にしてある．
そのため，リポジトリにデモソースコードを配置したいが，全てルートにするとおかしなことになり，誰も嬉しくない．
そのため，ルートをdemo/packageに分離し，リポジトリを覗きに来た人の目的によって，どちらに移動すればよいのかがひと目で分かるようにした．
.
├── demo # デモのソースコード
├── package
│ ├── dist # rollupの出力先(publish対象)
│ ├── docs # jsdoc/typedocで生成される(.gitignore)
│ ├── jest.config.js # jestの設定
│ ├── lib # ライブラリのソースコードを配置
│ ├── LICENSE # npm run publishで親からコピーしてくる(.gitignore)
│ ├── package.json
│ ├── package-lock.json
│ ├── README.md # npm run publishで親からコピーしてくる(.gitignore)
│ ├── rollup.config.js # rollupの設定
│ └── webpack.config.js
├── LICENSE
└── README.md # プロジェクトのREADME（github,npmともに表示）
ちょこっと設定
上記のディレクトリ構成だと，リポジトリのREADME.mdとパッケージのREADME.mdが共有されていない．
そこで私は，publishの前にコピーすることで対応した．
具体的には，package/package.jsonに以下を設定し，publishするときにはこちらを呼ぶようにした．
{
...,
"scripts": {
"prepublish": "npm test && cp ../README.md . && cp ../LICENSE .&& npm run build",
"publish": "npm publish",
},
...
}
おわりに
「あくまで一例」という事を考慮していただけると幸いです．