hatakoya memo

React: nwb

Reactコンポーネントライブラリを作るためのCLIツール。

ref: nwb | React Components and Libraries nwbでReact Component libraryを作る

インストール

yarn global add nwb

ライブラリのプロジェクト作成

nwb new react-component [ライブラリ名]

Error: spawn npm ENOENTがで失敗するときはnpmが入っていないので入れる。 sudo apt install npm

起動

yarn start

TypeScript環境の構築

必要な依存関係を入れる。

yarn add -D ts-loader typescript @types/react @types/react-dom

tsconfig.jsonを作成する。

{
  "compilerOptions": {
    "module": "esnext",
    "target": "es5",
    "lib": ["es6", "dom"],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

nwb.config.jsにwebpackの設定を追記する。

module.exports = {
  type: "react-component",
  npm: {
    esModules: true,
    umd: false
  },
  // ここから下を追加
  webpack: {
    extra: {
      entry: "./src/index",
      resolve: {
        extensions: [".ts", ".tsx", ".js", ".jsx"]
      },
      module: {
        rules: [{ test: /\.tsx$/, loader: "ts-loader" }]
      }
    }
  }
};

Ref: https://github.com/drager/nwb-react-typescript

コンポーネントライブラリの作り方

Ref: https://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb

npmモジュールとして公開

yarn publishすると自動でビルドされるようになっている。

yarn publish

nwb.config.js

← React Storybook →