ViteとTailwindCSSを使用してコンポーネントライブラリを開発する

前言

デモビデオ

https://www.bilibili.com/video/BV1EST3zPEyP/?spm_id_from=333.1387.homepage.video_card.click

参考

https://juejin.cn/post/7112295067682865166

https://juejin.cn/post/7046187185615142949

コードリポジトリ

https://gitee.com/malguy/vite-components-lib-tutorial

プロジェクトの初期化

Viteの作成

コマンドラインを使用します。

1
2
3

pnpm create vite react-components
cd react-components
pnpm i

あなたも私のスキャフォールディングパネルを使用できます(宣伝させていただきます😁🤓)

malred/cli-panel

インターネット接続は不要です。ファイルコピーを使用して作成されるためです。

Tailwindのインストール

Tailwind v3を使用します。

Installation - Tailwind CSS

1
2
3

pnpm install -D tailwindcss@3 postcss autoprefixer
# npx tailwindcss init -p
pnpm dlx tailwindcss@3 init -p

将路径添加到
**<font style="color:rgb(15, 23, 42);">tailwind.config.js</font>**
ファイル中のすべてテンプレートファイルに。

/** @type {import('tailwindcss').Config} */
export default {
    content: [
        "./index.html",
        // 使用react時
        "./src/**/*.{js,ts,jsx,tsx}",
        // 使用vue時
        "./src/**/*.{vue,js,ts,jsx,tsx}",
        // 使用svelte時
        "./src/**/*.{svelte,js,ts,jsx,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

将Tailwind每个層の
**<font style="color:rgb(15, 23, 42);">@tailwind</font>** 指令を追加します。
``css
@tailwind base;
@tailwind components;
@tailwind utilities;


# Buttonコンポーネントの作成

## src/components/Button/Button.jsx

``jsx
// src/components/button/index.tsx
/*
 * @Author WangZhiGang
 * @Date 2025-06-07 05:58:37
 * @Description 
 */
import './button.css'

import * as React from "react";

interface
Props
{
    size: 'lg' | 'md' | 'sm'
    children: string | React.ReactNode
}

const Button = ({
                    size, children
                }: Props) => {
    const className = size + " base "

    return (
        <button
            className={className}
        >
            {children}
        </button>
    );
};

export default Button;

もしTailwindのスタイルが長すぎると、CSSファイルを作成します。

``css
button {
&.base {
@apply text-white bg-blue-500 rounded-md
}

&.sm {
    @apply text-xs p-2
}

&.md {
    @apply text-sm p-4
}

&.lg {
    @apply text-lg p-8
}

}

1
2
3


## index.jsでエクスポート

// !!! 重要包含@tailwindのcssをエクスポートしないと、新プロジェクトで変数が失われます !!!
import ‘./index.css’
import ‘./App.css’

import Button from “./components/button/index.jsx”;

export {
Button as MalButton
}

1
2
3


# Viteの設定ファイルを変更

import {defineConfig} from ‘vite’
import react from ‘@vitejs/plugin-react’
import path from ‘path’
// const path = require(“path”);

const resolvePath = (str) => path.resolve(__dirname, str);

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
// 防止 vite 将 rgba() 風格の色を #RGBA 十六進数に変換
cssTarget: ‘chrome61’,
resolve: {
alias: {
“@”: path.resolve(__dirname, “./src”),
},
},
// 打包コンパイル設定
build: {
rollupOptions: {
// あなたのライブラリで不要な依存関係を外部化してください
external: [“react”, “react-dom”],
output: {
// UMD ビルドモードではこれらの外部化された依存関係にグローバル変数を提供します
globals: {
react: “react”,
“react-dom”: “react-dom”,
},
},
},
lib: {
// パッケージングのエントリーファイル、使用時に依存関係を検索します
entry: resolvePath(“src/index.js”),
name: “mal-react-components”,
// パッケージング後のファイル名 formatは異なる規格(commonjsなど)を表します
// UMD 形式の場合、ファイル名は mal-vue3-components.umd.js になる可能性があります。
// ES Module 形式の場合、ファイル名は mal-vue3-components.es.js になる可能性があります
fileName: format => mal-react-components.${format}.js,
},
}
})

import {defineConfig} from ‘vite’
import vue from ‘@vitejs/plugin-vue’
// import tailwindcss from ‘tailwindcss’;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
// css: {
// postcss: {
// plugins: [tailwindcss],
// }
// },
// 打包コンパイル設定
build: {
rollupOptions: {
// あなたのライブラリで不要な依存関係を外部化してください
external: [‘vue’],
output: {
// UMD ビルドモードではこれらの外部化された依存関係にグローバル変数を提供します
globals: {
vue: ‘Vue’,
},
},
},
lib: {
// パッケージングのエントリーファイル、使用時に依存関係を検索します
entry: ‘./src/index.js’,
// 名称
name: ‘mal-vue-components’,
// パッケージング後のファイル名 formatは異なる規格(commonjsなど)を表します
// UMD 形式の場合、ファイル名は mal-vue3-components.umd.js になる可能性があります。
// ES Module 形式の場合、ファイル名は mal-vue3-components.es.js になる可能性があります
fileName: (format) => mal-vue3-components.${format}.js,
},
}
})


TypeScriptを使用する場合

``shell
pnpm i @rollup/plugin-typescript tslib
# Viteの設定ファイルでNodeの依存関係を使用するにはインストールが必要です
pnpm i @types/node --save-dev

import {defineConfig} from 'vite'
import react from '@vitejs/plugin-react'
import typescript from '@rollup/plugin-typescript'
// TypeScriptでNodeの依存関係を使用するには @types/node をインストールする必要があります
import {resolve} from "node:path";

const resolvePath = (str: string) => resolve(__dirname, str);

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: {
            "@": resolve(__dirname, "./src"),
        },
    },
    // 打包コンパイル設定
    build: {
        rollupOptions: {
            // あなたのライブラリで不要な依存関係を外部化してください
            external: ["react", "react-dom"],
            output: {
                // UMD ビルドモードではこれらの外部化された依存関係にグローバル変数を提供します
                globals: {
                    react: "react",
                    "react-dom": "react-dom",
                },
            },
            plugins: [
                typescript({
                    target: "es2015", // ここにコンパイルするバージョンを指定します
                    rootDir: resolvePath("src/"),
                    declaration: true,
                    declarationDir: resolvePath("dist"),
                    exclude: resolvePath("node_modules/**"),
                    allowSyntheticDefaultImports: true,
                }),
            ],
        },
        lib: {
            // パッケージングのエントリーファイル、使用時に依存関係を検索します
            entry: resolvePath("src/index.ts"),
            name: "mal-react-components",
            // パッケージング後のファイル名 formatは異なる規格(commonjsなど)を表します
            // UMD 形式の場合、ファイル名は mal-vue3-components.umd.js になる可能性があります。
            // ES Module 形式の場合、ファイル名は mal-vue3-components.es.js になる可能性があります
            fileName: format => `mal-react-components.${format}.js`,
        },
    },
})

パッケージングと公開

1 2	pnpm build pnpm publish

使用

ローカルでテストしたい場合は

# ライブラリのディレクトリで実行
npm link 
# 使用したいディレクトリで実行
npm link [自分で書いたライブラリの名称]

しかし、以前試したところ失敗することが多く、私の解決策はパッケージング後のファイルをプロジェクトに直接コピーし、そこから依存関係をインポートすることです。

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。