怎么搭建一個簡單的組件庫

怎么搭建一個簡單的組件庫

在現代前端開發中，組件庫已經成為不可或缺的一部分。無論是大型企業級應用，還是小型個人項目，組件庫都能顯著提高開發效率，確保代碼的一致性和可維護性。本文將詳細介紹如何從零開始搭建一個簡單的組件庫，涵蓋從項目初始化到發布的全過程。

1. 項目初始化

1.1 選擇技術棧

在開始之前，首先需要確定組件庫的技術棧。常見的選擇包括：

• React：目前最流行的前端框架之一，擁有龐大的社區和豐富的生態系統。
• Vue：輕量級且易于上手，適合快速開發。
• Angular：適合大型企業級應用，提供了完整的解決方案。

本文將以 React 為例進行講解。

1.2 創建項目

使用 create-react-app 快速初始化一個 React 項目：

npx create-react-app my-component-library
cd my-component-library

1.3 配置 TypeScript

TypeScript 提供了類型檢查，能夠有效減少錯誤并提高代碼的可維護性。將項目轉換為 TypeScript：

npm install --save typescript @types/react @types/react-dom
mv src/index.js src/index.tsx
mv src/App.js src/App.tsx

1.4 配置 ESLint 和 Prettier

為了保持代碼風格一致，配置 ESLint 和 Prettier：

npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier

創建 .eslintrc.json 文件：

{
  "extends": ["react-app", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

創建 .prettierrc 文件：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

2. 開發組件

2.1 創建組件目錄結構

在 src 目錄下創建一個 components 文件夾，用于存放所有組件：

src/
├── components/
│   ├── Button/
│   │   ├── Button.tsx
│   │   ├── Button.css
│   │   └── index.ts
│   ├── Input/
│   │   ├── Input.tsx
│   │   ├── Input.css
│   │   └── index.ts
│   └── index.ts

2.2 編寫第一個組件：Button

在 src/components/Button/Button.tsx 中編寫一個簡單的按鈕組件：

import React from 'react';
import './Button.css';

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button className="button" onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

在 src/components/Button/Button.css 中添加樣式：

.button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: #0056b3;
}

在 src/components/Button/index.ts 中導出組件：

export { default } from './Button';

2.3 編寫第二個組件：Input

在 src/components/Input/Input.tsx 中編寫一個簡單的輸入框組件：

import React from 'react';
import './Input.css';

interface InputProps {
  value: string;
  onChange: (value: string) => void;
  placeholder?: string;
}

const Input: React.FC<InputProps> = ({ value, onChange, placeholder }) => {
  return (
    <input
      className="input"
      type="text"
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
    />
  );
};

export default Input;

在 src/components/Input/Input.css 中添加樣式：

.input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
}

.input:focus {
  outline: none;
  border-color: #007bff;
}

在 src/components/Input/index.ts 中導出組件：

export { default } from './Input';

2.4 導出所有組件

在 src/components/index.ts 中導出所有組件：

export { default as Button } from './Button';
export { default as Input } from './Input';

3. 打包組件庫

3.1 安裝 Rollup

Rollup 是一個模塊打包器，適合打包 JavaScript 庫。安裝 Rollup 及相關插件：

npm install --save-dev rollup rollup-plugin-typescript2 rollup-plugin-postcss rollup-plugin-terser @rollup/plugin-node-resolve @rollup/plugin-commonjs

3.2 配置 Rollup

在項目根目錄下創建 rollup.config.js 文件：

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

export default {
  input: 'src/components/index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true,
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
    }),
    postcss({
      extract: true,
      modules: true,
      use: ['sass'],
    }),
    terser(),
  ],
  external: ['react', 'react-dom'],
};

3.3 打包組件庫

在 package.json 中添加打包腳本：

"scripts": {
  "build": "rollup -c"
}

運行打包命令：

npm run build

打包后的文件將生成在 dist 目錄下。

4. 發布組件庫

4.1 配置 package.json

在 package.json 中添加以下配置：

{
  "name": "my-component-library",
  "version": "1.0.0",
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "files": ["dist"],
  "scripts": {
    "build": "rollup -c",
    "prepare": "npm run build"
  },
  "peerDependencies": {
    "react": "^17.0.0",
    "react-dom": "^17.0.0"
  },
  "devDependencies": {
    "@rollup/plugin-commonjs": "^21.0.1",
    "@rollup/plugin-node-resolve": "^13.0.6",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "eslint": "^8.0.0",
    "eslint-config-prettier": "^8.0.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.0.0",
    "prettier": "^2.0.0",
    "rollup": "^2.0.0",
    "rollup-plugin-postcss": "^4.0.0",
    "rollup-plugin-terser": "^7.0.0",
    "rollup-plugin-typescript2": "^0.30.0",
    "typescript": "^4.0.0"
  }
}

4.2 發布到 npm

首先，確保你有一個 npm 賬號。如果沒有，可以在 npmjs.com 上注冊一個。

登錄 npm：

npm login

發布組件庫：

npm publish

發布成功后，你的組件庫就可以通過 npm 安裝了：

npm install my-component-library

5. 使用組件庫

在其他項目中安裝并使用你的組件庫：

npm install my-component-library

在項目中使用組件：

import React from 'react';
import { Button, Input } from 'my-component-library';

const App = () => {
  const handleClick = () => {
    alert('Button clicked!');
  };

  const handleChange = (value: string) => {
    console.log(value);
  };

  return (
    <div>
      <Button label="Click Me" onClick={handleClick} />
      <Input value="" onChange={handleChange} placeholder="Enter text" />
    </div>
  );
};

export default App;

6. 總結

通過以上步驟，你已經成功搭建并發布了一個簡單的 React 組件庫。雖然這個組件庫目前只包含兩個簡單的組件，但它為你提供了一個堅實的基礎，你可以在此基礎上不斷擴展和完善。隨著項目的增長，你可能還需要考慮添加更多的工具和流程，如自動化測試、文檔生成、持續集成等，以確保組件庫的質量和可維護性。

希望本文對你有所幫助，祝你在組件庫的開發之路上越走越遠！