VITEとTypeScriptを使用して反応コンポーネントライブラリを作成する

ほとんどの時間、我々は反応アプリケーションを作成するために私たちのお気に入りのツールを使用して:次の、ギャツビーの反応アプリを作成します.
しかし、コンポーネントライブラリの構築に関しては別の話です.その選択は簡単ではない.この記事では、VITEとTypesScriptでライブラリを作成する方法を示します.

なぜVite？

VITEは優れた性能を持つモダンなフロントエンドツールです.詳細はhereです.ボックスから、それはtypescriptとライブラリのバンドルをサポートしています.したがって、反応ライブラリを作成するのに最適な選択です.

どのように構成し、プロジェクトを整理？

モノレールを作り始めましょう.我々は依存関係を管理するために糸のワークスペースを使用します.
monorepoを設定するにはパッケージを作成する必要があります.倉庫のルートのJSONファイル.

{
  "name": "lib-example",
  "private": true,
  "workspaces": {
    "packages": [
      "packages/*",
      "sites/*"
    ]
  },  
}

リポジトリには2つのフォルダがあります.

コンポーネントライブラリパッケージ

を含むパッケージ

サイト

をテストするサイトを含むサイト
これが木の構造です.

react-library-vite-example
|- packages
|  |- my-lib
|- sites
|  |- my-site
|- package.json
|- yarn.lock

ライブラリパッケージ

パッケージフォルダ内で、新しいVITEプロジェクトを作成します.

yarn create vite my-lib --template react-ts

デフォルトでは、TypeScriptで構成された反応Webアプリケーションを作成します.今、私たちは、Viteからライブラリモードを使用するようにカスタマイズする必要があります.
まず、コンポーネントの型定義を生成するためにVITEプラグインをインストールする必要があります.

yarn add --dev vite-plugin-dts

ライブラリをバンドルするには、viteを更新する必要があります.設定.jsファイル.

import react from '@vitejs/plugin-react';
import path from 'node:path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';

export default defineConfig({
    plugins: [
        react(),
        dts({
            insertTypesEntry: true,
        }),
    ],
    build: {
        lib: {
            entry: path.resolve(__dirname, 'src/lib/index.ts'),
            name: 'MyLib',
            formats: ['es', 'umd'],
            fileName: (format) => `my-lib.${format}.js`,
        },
        rollupOptions: {
            external: ['react', 'react-dom', 'styled-components'],
            output: {
                globals: {
                    react: 'React',
                    'react-dom': 'ReactDOM',
                    'styled-components': 'styled',
                },
            },
        },
    },
});

ライブラリにバンドルしたくない依存関係を外部化することも重要です.
私たちのロールラップの設定は2つのバンドル形式:ESとUMDを生成します.
次のボタンコンポーネント(mybutton . tsx)をライブラリに追加します.

import styled from 'styled-components';

const MyButton = styled.button`
    border: none;
    border-radius: 0.5rem;
    background-color: #186faf;
    color: hsl(0deg, 0%, 98%);
    padding: 0.75rem;
    cursor: pointer;
    &:hover {
        background-color: #0a558c;
    }
    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px #62b0e8;
        background-color: #0a558c;
    }
`;

export default MyButton;

すべてのパブリック反応コンポーネントはファイルsrc/lib/index.tsにエクスポートされます.

export { default as MyButton } from './MyButton';

更新されたパッケージです.図書館のためのJSON

{
    "name": "my-lib",
    "version": "0.0.0",
    "scripts": {
        "dev": "vite",
        "build": "tsc && vite build",
        "preview": "vite preview"       
    },
    "dependencies": {
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "styled-components": "^5.3.3"
    },
    "devDependencies": {
        "@babel/core": "^7.16.12",
        "@types/node": "^17.0.12",
        "@types/react": "^17.0.38",
        "@types/react-dom": "^17.0.11",
        "@types/styled-components": "^5.1.21",
        "@vitejs/plugin-react": "^1.1.4",
        "acorn-jsx": "^5.3.2",
        "babel-loader": "^8.2.3",
        "typescript": "^4.5.5",
        "vite": "^2.7.13",
        "vite-plugin-dts": "^0.9.9"
    },
    "license": "UNLICENSED",
    "peerDependencies": {
        "react": "^16.8.0 || 17.x",
        "react-dom": "^16.8.0 || 17.x",
        "styled-components": "^5.0.0"
    },
    "files": [
        "dist"
    ],
    "main": "./dist/my-lib.umd.js",
    "module": "./dist/my-lib.es.js",
    "types": "./dist/index.d.ts",
    "exports": {
        ".": {
            "import": "./dist/my-lib.es.js",
            "require": "./dist/my-lib.umd.js"
        }
    }
}

ライブラリをコンパイルするために、run buildを実行します.
ライブラリに依存関係をバンドルしているため、パッケージをクリーンアップしなければなりません.公開されたNPMパッケージのJSON.prepackスクリプトを追加することでこれを行います.

"prepack": "json -f package.json -I -e \"delete this.devDependencies; delete this.dependencies\"",

私はJSONで働くためのCLIを使用します.

コンポーネントライブラリをテストするWebサイト

サイトフォルダに新しいViteプロジェクトを作成することから始めましょう.

yarn create vite my-site --template react-ts

以下の依存関係をパッケージに追加する必要があります.コンポーネントライブラリをテストするJSONファイル

"dependencies": {
   "my-lib": "*",
   ...
},

これで、ボタンコンポーネントを参照して使用できます.

import { MyButton } from 'my-lib';

function App() {    
    return (
        <div className="App">
            ...
                    <MyButton onClick={...}>Click here!</MyButton>
            ...                
        </div>
    );
}

export default App;

devインストールを開始するために、run installとrun run devを実行します.

設定ストーリーブック

また、UIコンポーネントのドキュメントを作成します.StoryBookは私たちの反応コンポーネントの遊び場を作成するための素晴らしいプロジェクトです.
次のコマンドを実行して、ブックを設定します.

cd /packages/my-lib && npx sb init --builder storybook-builder-vite

書き込み時に、アドオンの相互作用はうまくいきません.以下はカスタマイズされた設定です.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
  ],
  framework: "@storybook/react",
  core: {
    builder: "storybook-builder-vite",
  },
};

最後に、ボタンコンポーネントのストーリーファイルを作成します.

import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import MyButton from './MyButton';

const meta: ComponentMeta<typeof MyButton> = {
    title: 'Design System/MyButton',
    component: MyButton,
};
export default meta;

export const Primary: ComponentStoryObj<typeof MyButton> = {
    args: {
        disabled: false,
        children: 'Hello',
    },
};

ランランを起動するランランストーリーブックを実行します.

あなたは物語についての詳細を知りたい場合は、the official documentationをチェックしてください.

次は何ですか。

我々は、優れたVITEスタートアッププロジェクトを作成しました.しかし、我々はさらに行くことができますし、追加のツールを設定するなどのエスプリ、きれいな、冗談.
あなたはsource code on Githubを見つけることができます.
これは私のプロジェクトで私にとって役に立ちました.うまくいけばそれはあなたを助ける.