コンポーネントライブラリのセットアップ

導入

コンポーネントライブラリは、特に複数の製品やチームとの組織では、日によってますます人気が高まっている.組織は、コンポーネントライブラリを維持するためだけにチームを捧げています.ここでの最終目標は、我々の原則と実践をよく考えたデザインシステムであろう.しかし、良いデザインシステムは、数ヶ月あるいは数年の研究と多くの組織が余裕がない専用のチームをとります.グーグルのMaterial design アトラシアンのDesign system いくつかは、心に浮かぶ優れたものです.チームの大部分を開始する良い場所は、コンポーネントライブラリです.アプリケーション全体の一貫性を達成するのに役立つ一般的に使用されるコンポーネントのコレクションです.我々は、単純なコンポーネントのように起動することができますbutton , inputs , modal そして、道に沿ってより多くを加えてください.
のは、ゼロからの単純なコンポーネントライブラリを構築しようとすると、反応を使用して、スクリプト、およびrolulupそれをバンドルし、道に沿って物事を学ぶ.

プロジェクトを初期化する

ディレクトリの作成と初期化を開始しましょうnpm プロジェクトreact-lib

mkdir react-lib
cd react-lib
npm init

あなたは質問を埋めることができるか-y デフォルト値で初期化するフラグ.我々は今package.json プロジェクトのファイル.
我々は使用しているのでreact and typescript , これらの依存関係を追加することができます

npm i -D react typescript @types/react

私たちは図書館としてこれを出荷する予定ですので、すべてのパッケージは以下のとおりですdevDependencies . また、このライブラリは、反応が付属して使用されるアプリは、我々はバンドルに沿って反応する必要はありません.それで、我々は加えますreact としてpeerDependency . 我々package.json 今のように見える

コンポーネントの追加

コンポーネントを組織する私の好ましい方法はsrc/components 各コンポーネントが独自のフォルダを持つフォルダ.たとえば、我々があるならばButton コンポーネントと呼ばれるフォルダがありますButton インsrc/components すべてのボタンに関連するファイルをButton.tsx , Button.css , Button.types.ts , とindex.ts コンポーネントをエクスポートするファイル
また、エクスポートする方法に沿ってインデックスファイルのカップルがあります.つはプロジェクトの主なエントリポイントですsrc/index.ts , とすべてのコンポーネントをエクスポートするsrc/components/index.ts . ボタンコンポーネントを持つフォルダ構造はこのようになります.

ボタンコンポーネント

では、コードを追加しましょうButton コンポーネント.私は、これが本当に我々の懸念でないので、非常に単純な構成要素とともに行きます.Button.tsx Button.css Button.types.ts Button/index.ts
我々が我々を持つ今Button コンポーネントは、コンポーネントやsrcからエクスポートできます.src/component/index.ts
src/index.ts

タイプ設定

私たちは私たちのコンポーネントを追加しました、そして、現在、我々のライブラリを構築するために、我々はtypescriptを構成する必要があります.私たちはすでにtypescript依存関係をインストールしましたtsconfig.json . 我々はこれを行うことができます

npx tsc --init

これはtsconfig.json 利用可能なオプションのほとんどがファイルをコメントします.私はほとんどのデフォルトをいくつかのマイナーな変更で使用します.

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
  }
}

我々のビルドスクリプトを加えましょうpackage.json これをテストするには

"scripts": {
    "build": "tsc"
 },

我々が走るならばnpm run build , 私たちはdist すべてのTSファイルをフォルダにJSファイルに配信されます.あなたが気づくならば、CSSファイルはありませんdist そして、それらはOUT TSコンパイラによってバンドルされません.それをrollupを使いましょう

ロール構成

私たちはRollup ここの選択のバンドルとして.それで、それをインストールしましょう

npm i -D rollup

プラグイン

Rollupには、バンドルプロセス中に実行する必要のあるすべてのタスクを指定できるプラグインシステムがあります.以下のプラグインが必要になります

@rollup/plugin-node-resolve - でサードパーティの依存関係を解決するnode_modules

@rollup/plugin-commonjs - 包むcommonjs フォーマット

@rollup/plugin-typescript - 私たちのタイプスクリプトコードをJS

rollup-plugin-peer-deps-external - 結束を防ぐpeerDependencies

rollup-plugin-postcss - CSSを処理するには

rollup-plugin-terser - バンドルを制限する

プラグインのインストール

npm i -D @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-terser

ロールプ設定。js

次のステップはrollup.config.js ファイル.これは、すべての我々のロールラップコンフィグライブです.
我々のライブラリーへのエントリポイントはsrc/index.ts ファイルと私たちの両方にライブラリをバンドルされますcommonjs and es modules 形式このライブラリを使用しているアプリケーションがesmoduleをサポートするなら、それはesm ビルドするcjs ビルドを使用します.rollup.config.js

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';

const packageJson = require('./package.json');

export default {
    input: 'src/index.ts',
    output: [
        {
            file: packageJson.main,
            format: 'cjs',
            sourcemap: true,
            name: 'react-lib'
        },
        {
            file: packageJson.module,
            format: 'esm',
            sourcemap: true
        }
    ],
    plugins: [
        external(),
        resolve(),
        commonjs(),
        typescript({ tsconfig: './tsconfig.json' }),
        postcss(),
        terser()
    ]
}

私たちはinput and output 我々の価値cjs and esm ビルドします.

すべてをまとめる

指定したことに注意してくださいfile オプションoutput からpackage.json . これらの2つの値を定義しましょうpackage.json

"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",

私たちがrollupを設定した今、我々は我々のbuildスクリプトでそれを使うことができますpackage.json の代わりにtsc コマンド.

"build": "rollup -c"

我々が走るならばnpm run build 今、我々はそこにあることがわかりますdist フォルダは、我々の図書館出力でつくられます.

The cjs フォルダにはcommonjs バンドルesm フォルダにモダンesmodules バンドル.
我々は現在、NPMのレジストリに公開することができますまたは他のアプリケーションと同様にローカルで使用する独自のライブラリを持っています.

テスト

我々は、ローカルに使用してライブラリをテストすることができますnpm pack or npm link .

バンドルタイプ

あなたが我々に気がつくならばdist 実行後フォルダnpm run build , 我々は、我々が我々のタイプを結び付けていないのを見ることができます.ここでTSを使う利点は、コードエディターがタイプを拾って、IntelliSenseと静的な型チェックを提供することです.また、ドキュメントをよく見る必要性を減らします.
我々はいくつかのオプションを追加する必要がありますtsconfig.json 型を生成するには

"declaration": true,
"declarationDir": "types",
"emitDeclarationOnly": true

これを加えると、私たちのタイプフォルダはcjs and esm フォルダdist .
私たちはさらに私たちのライブラリで使用されるすべてのタイプを含む単一のファイルを提供することによってこれを改善することができます.このためには、我々はrollup-plugin-dts どれが私たちを取る.d.ts ファイルと単一の種類のファイルを吐き出します.

npm i -D rollup-plugin-dts

我々は別のentrypointを追加することができますrollup.config.js 設定を追加するには

{
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: "esm" }],
        external: [/\.css$/],
        plugins: [dts()],
},

これが何をするのかindex.d.ts ESMバンドルからのファイルで、すべての型ファイルを解析して、1つのタイプファイルを生成しますindex.d.ts インサイドdist フォルダ.
今すぐ追加することができますtypes エントリーインpackage.json

"types": "dist/index.d.ts"

全体rollup.config.js 今のように見える

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';

const packageJson = require('./package.json');

export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
                name: 'react-ts-lib'
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true
            }
        ],
        plugins: [
            external(),
            resolve(),
            commonjs(),
            typescript({ tsconfig: './tsconfig.json' }),
            postcss(),
            terser()
        ],
    },
    {
        input: 'dist/esm/types/index.d.ts',
        output: [{ file: 'dist/index.d.ts', format: "esm" }],
        external: [/\.css$/],
        plugins: [dts()],
    },
]

今、我々のライブラリを他のプロジェクトに使用する場合、コードエディターは型を取得し、IntelliSenseと型チェックを提供できます.

結論

これは、コンポーネントライブラリを設定するための包括的または完全な方法ではありません.これは、基本的なセットアップを開始すると、プロセス内のバンドルについて学ぶことです.このプロセスの次のステップはテストやツールを追加することですStorybook or Styleguidist .
ソースコードはこちらreact-ts-lib
読書ありがとう!
乾杯!