发布自己的vite + react + storybook组件库

前言

快速搭建一个炫酷的组件库

之前看好多文章，都只有怎么创建组件库和怎么预览，但是在引用和部署线上的时候遇到了好多没有写的问题，自己研究了很久才解决，决定沉淀一篇文章，也算给自己的备忘~

因为时间线有点长，细节如果描写的不到位可以直接看代码库

初始化项目

scss 复制代码

    // 初始化vite
    yarn create vite my-vue-app --template react-ts
    
    // 初始化storybook
    npx storybook init --builder vite

然后在/src/components中写你的组件

在/src/stories中写你的story页面，所有后缀为.stories.ts的文件都会被解析, 里面的props和注释会被自动显示在storybook的页面上

typescript 复制代码

// 举例
import type { StoryObj } from '@storybook/react';

import MutipleSelector from '../components/multipleSelector/MutipleSelector';

// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta = {
  title: 'Components/MutipleSelector', // 这个路径关系到你左侧的菜单显示
  component: MutipleSelector,
  parameters: {
    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
    layout: 'centered',
  },
  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
  tags: ['autodocs'], // 自动生成
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: { control: 'color' },
  },
}
// satisfies Meta<typeof MutipleSelector>;

export default meta;
type Story = StoryObj<typeof MutipleSelector>;

const defaultOptions = []
for (let i = 1; i <= 50; i++) {
  defaultOptions.push(i);
}

// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
export const Primary: Story = {
  args: { // 需要传入的props，可以自定义
    value: [],
    onChange: (v) => {console.log(v)},
    defaultOptions: defaultOptions,
  },
};

如果要修改storybook的配置，比如修改logo或者页面显示样式，都可以修改.storybook文件夹下的问题件，官网文档

vite 配置

javascript 复制代码

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { resolve } from "path";

export default defineConfig({
  plugins: [react()],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true, // 允许在 Less 中使用 JavaScript 表达式
        globalVars: {
          // 全局变量
        }
      },
    }
  },
  build: {
    lib: {
      // 入口文件将包含可以由你的包的用户导入的导出：
      entry: resolve(__dirname, "src/index.ts"),
      name: "yodao-ui",
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
      external: ["react", "react-dom"],
      output: {
        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
        globals: {
          react: "React",
          "react-dom": "react-dom",
        },
      },
    },
  },
});

导出文件

json 复制代码

// package.json
"files": [
  "dist" // npm publish 的时候只上传dist
],
"exports": {
  ".": {
    "import": "./dist/index.es.js",
    "require": "./dist/index.umd.js"
  },
  "./style": "./dist/style.css"
},
"resolutions": {
  "string-width": "^4", // 限制string-width版本，不然会报错
  "jackspeak": "^2",
  "strip-ansi": "^6"
}

调试

bash 复制代码

npm link

npm link target-project

构建

yarn build

上传

arduino 复制代码

npm login

npm publish

npm publish --access public // 第一次发布组的时候，可以强制发布公开库

使用组件库

typescript 复制代码

  npm install @youdao-ead-fe/yodao-ui
  
  // 在入口文件如_app.js中引入style
  import '@youdao-ead-fe/yodao-ui/style'
  
  // 在目标页面中
  import {MutipleSelector} from @youdao-ead-fe/yodao-ui

npm线上地址

Storybook 调试

请安装7.4.0, 之前用7.5.1会遇到报错

vbnet 复制代码

Global CSS cannot be imported from files other than your Custom <App>. Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules)

调试

arduino 复制代码

// 本地起storybook预览，相当于平常咱们的yarn dev
yarn storybook

部署到github

使用@storybook/storybook-deployer文档发布到github

scss 复制代码

    yarn build-storybook
    
    // 然后在storybook-static 文件夹中添加.nojekyll文件
    
    // 打包产物本地预览
    yarn preview-storybook

    // 部署到github线上
    yarn storybook-to-ghpages -- --existing-output-dir=storybook-static

组件库线上地址预览

参考

# Vite + storybook 搭建自己的 React 组件库