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

まだまだ開発を始めたばかりなのでミスってるところも多いと思いますが、備忘録がてら。

前提

• React
• TypeScript
• CSS Modules(Sass)

package.json

{
  "author": "",
  "dependencies": {
    "node-sass": "7.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "description": "",
  "devDependencies": {
    "@rollup/plugin-commonjs": "21.0.1",
    "@rollup/plugin-node-resolve": "13.0.6",
    "@types/react": "17.0.37",
    "autoprefixer": "10.4.0",
    "rollup-plugin-multi-input": "1.3.1",
    "rollup-plugin-postcss": "4.0.2",
    "rollup-plugin-typescript2": "0.31.1",
    "tslib": "2.3.1",
    "typescript": "4.5.3",
    "typescript-plugin-css-modules": "3.4.0"
  },
  "license": "ISC",
  "name": "hoge",
  "scripts": {
    "build": "rm -rf dist && rollup -c",
    "build:watch": "rm -rf dist && rollup -c -w"
  },
  "version": "1.0.0"
}

rollup.config.js

import commonjs from "@rollup/plugin-commonjs";
import { nodeResolve } from "@rollup/plugin-node-resolve";
import autoprefixer from "autoprefixer";
import multiInput from "rollup-plugin-multi-input";
import postcss from "rollup-plugin-postcss";
import typescript from "rollup-plugin-typescript2";

const config = {
  input: ["./src/index.ts", "./src/**/index.tsx"],
  output: {
    dir: "dist",
    exports: "auto",
    format: "cjs",
    sourcemap: true,
  },
  plugins: [
    commonjs(),
    multiInput(),
    nodeResolve(),
    postcss({
      minimize: true,
      modules: true,
      plugins: [autoprefixer()],
      sourceMap: true,
    }),
    typescript(),
  ],
};

export default config;

コンポーネント

import React from "react";
import styles from "./style.module.scss";

function Hoge(): JSX.Element {
  return <div className={styles.wrapper}>hogehoge</div>;
}

export default Hoge;

とりあえず上記で最低限動きました。

webpack を使って作るのかなーと思っていたのですが、ライブラリー系は rollup のほうが良いみたいなドキュメントを読んだので、それならとぱぱっとやってみました。

思った以上にあっさり組めたので良かったです。

細かいところまで詰められたらリポジトリを公開しようと思いますが、ひとまず。