第一章：实现组件库的MVP【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

这篇文章距离上次修改已过186天，其中的内容可能已经有所变动。

以下是一个简化的React组件库的MVP实现示例，使用TypeScript、Vite和Tailwind CSS。

首先，确保你已经安装了Node.js和npm。

创建一个新的项目文件夹，并在命令行中运行以下命令来初始化一个新的npm项目：




npm init -y

安装Vite和Tailwind CSS作为开发依赖：




npm install vite react react-dom tailwindcss postcss autoprefixer -D

创建一个vite.config.ts文件来配置Vite和Tailwind CSS：




// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { resolve } from 'path';
 
export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "${resolve(__dirname, 'src/styles/tailwind.scss')}";`,
      },
    },
  },
});

创建Tailwind CSS配置文件和入口样式文件：




mkdir src/styles
touch src/styles/tailwind.scss




// src/styles/tailwind.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

安装Tailwind CSS CLI来生成配置文件：




npm install @tailwindcss/cli -D
npx tailwindcss init -p

创建React组件和对应的TypeScript类型定义文件：




mkdir src/components
touch src/components/MyButton.tsx




// src/components/MyButton.tsx
import React from 'react';
 
type MyButtonProps = {
  label: string;
  onClick: () => void;
};
 
const MyButton = ({ label, onClick }: MyButtonProps) => {
  return <button onClick={onClick}>{label}</button>;
};
 
export default MyButton;

创建一个入口文件index.html和main.tsx来使用组件：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Component Library</title>
  <link rel="stylesheet" href="./styles/tailwind.css">
</head>
<body>
  <div id="root"></div>
</body>
</html>




// main.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import MyButton from './components/MyButton';
 
ReactDOM.render(
  <MyButton label="Click Me" onClick={() => alert('Button clicked!')} />,
  document.getElementById('root')
);

最后，在package.json中添加启动脚本：




{
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  }
}

运行以下命令启动开发服务器：




npm run dev

访问提示的本地服务器地址，你应该能看到一个带有Tailwind CSS样式的按钮组件。这个简单的MVP展示了如何设置项目，并创建一个React组件，它使用了Tailwind CSS来减少样式的编写工作。在实际的组件库中，你会继续添加更多组件，并提供更多的配置选项。

第一章：实现组件库的MVP【前端工程化入门-----从零实现一个react+ts+vite+tailwindcss组件库】

评论已关闭

推荐阅读