尝试使用 Vite + React + Tailwind CSS 创建一个 UI 库

2 年 ago
科, 雅
3 minutes

这篇文章是2023年百事可乐圣诞倒数日历的第五天。

现在在参与的项目中，我们讨论了创建一个UI库，并尝试使用npm进行发布！

这篇文章将分享环境搭建的步骤。

本文中掲載的一部分代码已在GitHub仓库中公开。

请确定读者

    • React * Vite * Tailwind CSSを使ったUIライブラリを実装したい方

 

    自作のコンポーネントをパッケージで配信してみたい方

技术堆栈

本文中所使用的主要技术栈如下所列。

    • React

 

    • Vite

 

    • TypeScript

 

    Tailwind CSS

1. 起初建立

使用以下命令，使用Vite的react-ts模板创建项目。

yarn create vite . --template react-ts

安装软件包

因为缺少 yarn.lock 文件而出现错误，所以正在创建一个空文件。

touch yarn.lock
yarn

2. 引入Tailwind CSS

因为我想要使用tailwind进行样式设置，所以需要安装该软件包。

yarn add -D tailwindcss postcss autoprefixer

使用以下命令向项目引入Tailwind.

yarn tailwindcss init -p

可以将生成的postcss.config.js的内容迁移到vite.config.ts中。

修改 tailwind.config.js。

您可以在这种情况下添加任何前缀，例如tw_，请根据需要进行设置。

由于有类型，可以进行补全、在编辑器中显示错误信息等等，所以我决定将其转换为.ts文件。

import type { Config } from "tailwindcss";
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
} satisfies Config;

在项目初始构建时，通过src/index.css生成的文件，加载tailwind的CSS。

请参考官方文件以获取更详细信息。

源代码/索引.css

@tailwind base;
@tailwind components;
@tailwind utilities;

3. 修复构建设置周边。

Vite 配置文件 vite.config.ts。

由于在2中删除了postcss.config.js文件，因此将其记述在这里。

css: {
  postcss: {
		plugins: [tailwindcss, autoprefixer]
	}
}

以后还会添加建设周围的内容

build: {
  lib: {
    entry: resolve(__dirname, "src/index.ts"),
    name: formattedName,
    formats: ["es", "umd"],
    fileName: (format) => `${formattedName}.${format}.js`,
  },
}

最终，代码变为以下的样子。

/// <reference types="vitest">
import { resolve } from "path";
import react from "@vitejs/plugin-react";
import autoprefixer from "autoprefixer";
import tailwindcss from "tailwindcss";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { name } from "./package.json";

const formattedName = name.match(/[^/]+$/)?.[0] ?? name;

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    dts({
      insertTypesEntry: true,
    }),
  ],
  css: {
    postcss: {
      plugins: [tailwindcss, autoprefixer],
    },
  },
  build: {
    lib: {
      entry: resolve(__dirname, "src/index.ts"),
      name: formattedName,
      formats: ["es", "umd"],
      fileName: (format) => `${formattedName}.${format}.js`,
    },
    rollupOptions: {
      external: ["react", "react/jsx-runtime", "react-dom", "tailwindcss"],
      output: {
        globals: {
          react: "React",
          "react/jsx-runtime": "react/jsx-runtime",
          "react-dom": "ReactDOM",
          tailwindcss: "tailwindcss",
        },
      },
    },
  },
});

如果在此时无法加载路径并出现错误，请使用以下命令添加类型信息来解决。

yarn add -D @types/node

tsconfig.json的中文释义是” TypeScript配置文件”。

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "allowSyntheticDefaultImports": true,
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "allowJs": false,
    "esModuleInterop": false,
    "moduleResolution": "Node"
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

tsconfig.node.json 的释义是什么？

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts", "package.json"]
}

7. 修改 package.json

将以下有关入口点设置的配置添加到package.json中。

"main": "./dist/yhi-component-lib.umd.js",
"module": "./dist/yhi-component-lib.es.js",
"types": "./dist/index.d.ts",
"license": "MIT",
"exports": {
  ".": {
    "types": "./dist/index.d.ts",
    "import": "./dist/yhi-component-lib.es.js",
    "require": "./dist/yhi-component-lib.umd.js"
  },
  "./dist/style.css": "./dist/style.css"
},
"files": [
  "dist"
],

将脚本中添加构建命令

"scripts": {
  // ...
	// ↓追加
	"build": "tsc && vite build",
  // ...
},

增加组件

在src下创建一个组件

为了将组件汇总到一个目录中，我创建了components文件夹并将其下的组件整理到一起。

src/components/Button/Button.tsx 组件的中文释义

import { ButtonProps } from "./type";

export const Button = (props: ButtonProps) => {
  return <button {...props} className="bg-blue-500 hover:bg-blue-600 px-5 py-2 rounded-lg text-sm text-white " />;
};

src/components/Button/type.ts的内容可以用以下方式来表达：
src/components/Button/type.ts文件

import { ComponentProps } from "react";

export type ButtonProps = Pick<ComponentProps<"button">, "children" | "onClick">;

src/components/Button/index.ts 的中文本地化的一种翻译选项如下：src/components/Button/index.ts 的中文本地化只需要一个选项。

export * from "./Button";

在src目录下，将使用CSS创建的组件导出。

src/index.ts的内容如下，请用中文进行原生重述。只需要一种选项：

– src/index.ts文件的内容如下。
– 下面是src/index.ts的内容。

import "./index.css";
export * from "./components";

8. 建设

请使用以下命令执行软件包的构建：

yarn build

如果在dist文件夹下生成了文件，那就算成功了。

9. 包裹发布

如果尚未完成登录npm，请输入验证信息。

yarn npm login

您可以使用以下命令将软件包发布到npm。

npm publish

10. 进行动作确认

可以按照以下方式使用创建的组件。

import { Button } from "yhi-component-lib"

export const SamplePage = () => {
  return (
    <div>
      <Button>ボタンA</Button>
      <Button>ボタンB</Button>
      <Button>ボタンC</Button>
    </div>
  )
}

这次一定要记得在构建时引入CSS文件（我忘了，导致样式无法生效，浪费了一整天）。

我认为将下面输出的CSS导入语句放入包含在整个页面加载样式中会更好。

@import "yhi-component-lib/dist/style.css"

结束

实际上，除了这篇文章的内容之外，我们还在做以下类似的事情，如果能在某个地方写出这些内容就好了。

    • Storybookの導入

 

    • Vitestでテスト実行

 

    • GitHub Actions上でnpmのパッケージ公開自動化

 

    Hygenを導入してコンポーネント作成をある程度自動化

明天早上由筋肉系设计师朝妻负责！请尽情期待！！！！

参考文章·典藏库

    • https://miyauchi.dev/ja/posts/lib-vite-tailwindcss/

 

    https://github.com/IgnacioNMiranda/vite-component-library-template
✖
广告
将在 10 秒后关闭
bannerAds