「コンポーネントライブラリを作るならnwbがいいよ」という話を聞いたのでやってみました。

インストール

$ npm i -g nwb
$ nwb --version

CLIツールなのでグローバルインストールします。グローバルを使いたくないかたは、以降のnwbをnpx nwbに読み替えてください。ちなみに結構重たいので、npxで毎回落としてくるのはちょっと煩雑かもです。

セットアップ

React Componentを作る時は、new react-component <コンポーネント名>でできます。ES ModuleやUMDに関する質問が対話形式できますので、作りたいものにあわせて回答しましょう。なお、ここからさきはUMDなしで進めます。

$ nwb new react-component my-component
Creating a react-component project...
? Do you want to create an ES modules build for use by compatible bundlers? Yes
? Do you want to create a UMD build for global usage via <script> tag? Yes
? Which global variable should the UMD build set? my-component
$ cd my-component

生成されるファイルはこのような形です。

$ tree -I node_modules
.
├── CONTRIBUTING.md
├── README.md
├── demo
│   └── src
│       └── index.js
├── nwb.config.js
├── package.json
├── src
│   └── index.js
└── tests
    └── index-test.js

4 directories, 7 files

コマンド

npm startで/demo/src/index.jsが開きますので、作成したコンポーネントの動作確認をおこなうことができます。

$ npm start // 動作確認画面
$ npm run build // ビルド
$ npm test // ユニットテスト

npm publish ./を実行すると、ビルドもした上で実行してくれます。

$ npm run build
> [email protected] prepublishOnly ./
> npm run build


> [email protected] build /Users/develop/my-component
> nwb build-react-component

✔ Cleaning module
✔ Creating ES5 build
✔ Creating ES modules build
✔ Creating UMD builds
...

ここまでやるとできるのが以下です。

profitwell-component / npm

コンポーネントライブラリを作るのがかなり簡単になりますので、汎用化したいものがあればnwbでサクッとやっちゃうのはよさそうです。

UMD対応等について

nwb.config.jsに書かれているので、あとで変更もできそうです。

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: {
      global: 'my-component',
      externals: {
        react: 'React'
      }
    }
  }
}