Vite + React从零开始搭建一个开源组件库


Posted in Javascript onJune 25, 2022

前言

日常使用开源的组件库时我们或多或少的都会做一些自定义的配置来符合实际的设计,当这些设计形成一定规模时,设计狮们就会形成一套规范,实施到前端这里就变成了组件库。

本文的目标是从0开始搭建一个面向组件库的基础设施,一起来探索下吧~。

?目标

  • 开发环境
  • 组件库编译,需要生成umd和esm模块的组件代码
  • 支持按需导入与全量导入
  • 组件文档/预览
  • 代码格式化和规范检测工具

?搭建开发环境

现在的时间点Vue或者React都可以用Vite来进行开发打包,这里有老前辈Vant的尝试我们可以放心使用~。

?️生成模板

yarn create vite my-components --template react-ts

这里我们创建生成一套react-ts的应用模板,可以仅保留main.tsx用于组件库的开发调试。

?CSS预处理器

CSS预处理器Sass与Less都可以选择,这里用了Sass:

yarn add sass

不需要配置直接用就可以,与它搭配的规则检查可以安装stylelint:

yarn add stylelint stylelint-config-standard stylelint-config-prettier-scss stylelint-config-standard-scss stylelint-declaration-block-no-ignored-properties

同时根目录下新建.stylelintrc:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-prettier-scss",
    "stylelint-config-standard-scss"
  ],
  "plugins": [
    "stylelint-declaration-block-no-ignored-properties"
  ],
  "rules": {
    "no-descending-specificity": null,
    "no-invalid-position-at-import-rule": null,
    "declaration-empty-line-before": null,
    "keyframes-name-pattern": null,
    "custom-property-pattern": null,
    "number-max-precision": 8,
    "alpha-value-notation": "number",
    "color-function-notation": "legacy",
    "selector-class-pattern": null,
    "selector-id-pattern": null,
    "selector-not-notation": null
  }
}

具体的规则可以查看文档,或者直接用ant-design/vant的规范,总之制定一个用起来舒服的即可。

?eslint

eslint与stylelint基本一个套路,这里不再重复,可以直接用开源组件库的规范。

?组件库编译

组件库的编译和默认的应用编译有一些不同,Vite有预设的打包组件库的选项可以帮我们省去大部分自定义的时间。

⚡️vite的打包配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

const path = require("path");

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

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: resolvePath("packages/index.ts"),
      name: "componentsName",
      fileName: format => `componentsName.${format}.js`,
    },
    rollupOptions: {
        external: ["react", "react-dom", "antd"],
        output: {
          globals: {
            react: "react",
            antd: "antd",
            "react-dom": "react-dom",
          },
        },      
    },
  },
})

这里我们的入口不是上面的main.tsx,组件库的打包入口需要是一个包含了所有组件的索引文件,大概可以长这样:

import Button from "./button/index";
export { Button };

默认情况下Vite的配置会打包umd和esm两种模式,只需要写一下名字即可。

同时在打包时我们也不希望外部的库打包进去,像必然存在的reactvue,二次封装的组件库antdvant这些都需要剔除出去。

现在直接build可以看到生成了esumd两份不同版本的文件,里面仅存在我们的代码:

yarn build
$ tsc && vite build
vite v2.9.12 building for production...
✓ 10 modules transformed.
dist/componentsName.es.js   2.27 KiB / gzip: 0.97 KiB
dist/componentsName.umd.js   1.81 KiB / gzip: 0.96 KiB
✨  Done in 3.12s.

⚡️自动生成ts类型文件

打包进行到上面已经初步可用,还不具备Ts的类型定义,用在Ts项目里会报错,这里我们可以用Ts的rollup插件来生成对应的类型:

yarn add @rollup/plugin-typescript tslib

Vite中的rollupOptions扩展一下plugins:

{
  ...,
  rollupOptions: {
    ...,
    plugins: [
      typescript({
        target: "es2015", // 这里指定编译到的版本,
        rootDir: resolvePath("packages/"),
        declaration: true,
        declarationDir: resolvePath("dist"),
        exclude: resolvePath("node_modules/**"),
        allowSyntheticDefaultImports: true,
      }),
    ],
  }
}

重新打包会发现所有packages目录下的文件都生成了一份d.ts的类型定义。

⚡️样式懒加载与全量加载

日常应用的开发时我们会在组件里导入样式,这样打包时构建工具会自动处理。

在构建组件库时为了支持更多的环境考虑,组件内不会导入样式,样式需要单独处理。

可以选择配置多入口或者用插件,Vite没有找到如何配置多入口,所以这里选择了用插件的方式。

开发时由于我们的组件单独组件内不会导入具体的样式,可以在开发的入口处导入全量样式省去手工导入的麻烦:

const req = import.meta.globEager("./*/style/index.scss");

export default req;

插件没有找到可以直接用的插件,这里自己写了一个:

import { compile } from "sass";
import postcss from "postcss";
import postcssImport from "postcss-import";

const autoprefixer = require("autoprefixer");

const path = require("path");

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

const glob = require("glob");

function generateCssPlugin() {
  return {
    name: "generate-css",
    async generateBundle() {
      const files = glob.sync(resolvePath("packages/**/style/*.scss"));

      const allProcess = [];
      const allRawCss = [];

      files.forEach(file => {
        const { css } = compile(file);
        allRawCss.push(css);
        const result = postcss([autoprefixer, postcssImport]).process(css, {
          from: file,
          to: file.replace(resolvePath("packages"), "dist"),
        });

        allProcess.push(result);
      });

      const results = await Promise.all(allProcess);

      results.forEach(result => {
        this.emitFile({
          type: "asset",
          fileName: result.opts.from
            .replace(resolvePath("packages"), "dist")
            .replace("dist/", "")
            .replace("scss", "css"),
          source: result.css,
        });
      });

      // 上半部分编译单独的css,下半部分会把所有css编译为一整个。

      const wholeCss = await postcss([autoprefixer, postcssImport]).process(
        allRawCss.join("\n")
      );

      this.emitFile({
        type: "asset",
        fileName: "styles.css",
        source: wholeCss.css,
      });
    },
  };
}

generateBundle是rollup的插件运行钩子,更多信息可以在这里找到。

再次打包可以看到生成了单个的样式与全量的样式,全量的可以走CDN导入,按需加载的可以用如vite-plugin-imp的构建工具进行按需加载。

Vite + React从零开始搭建一个开源组件库

?文档

文档我们需要同时兼顾到预览,这里我们可以选择storybook:

npx storybook init

之后不需要配置,直接用即可。

内置的mdx文件可以让我们同时写Markdown与jsx:

import { Meta, Story } from "@storybook/addon-docs";

import { Button } from "../packages";

<Meta title="Button" component={Button} />

<Canvas>
  <Story name="Button">
    <Button>这里写Jsx</Button>
  </Story>
</Canvas>

# 用法

**markdown 语法**

❤️npm 发布与发布前的测试

npm的发布流程比较简单,直接

npm login

npm version patch

npm publish

就可以了,对于私有的npm仓库地址我们可以在package.json中定义:

{
  "publishConfig": {
    "registry": "https://npm.private.com"
  }
}

,除此之外package.json中我们最好还要定义一下此组件库的基础入口信息:

{
  "main": "./dist/componentsName.umd.js",
  "module": "./dist/componentsName.es.js",
  "typings": "./dist/index.d.ts",
}

?测试

发布前的测试不同于单元测试(本文没有折腾单元测试),我们需要将打包好的库给实际的项目去使用,模拟安装发布后的包:

在组件库目录运行:

npm link

这样会基于当前目录的名字创建一个符号链接,之后在实际的项目中再次运行:

npm link componentsName

此时node_modules中对应的包会链接到你的组件库中,在组件库的任何修改都可以及时反馈。

当然不仅仅用于测试,开发时也可以用这种方式。

到此这篇关于Vite + React 如何从0到1搭建一个开源组件库的文章就介绍到这了,更多相关React 搭建组件库内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Javascript 相关文章推荐
一些mootools的学习资源
Feb 07 Javascript
jQuery 源码分析笔记(5) jQuery.support
Jun 19 Javascript
document.write的几点使用心得
May 14 Javascript
jquery滚动特效集锦
Jun 03 Javascript
JS+CSS实现自动切换的网页滑动门菜单效果代码
Sep 14 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
Feb 18 Javascript
WebSocket的通信过程与实现方法详解
Apr 29 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
layui table复选框禁止某几条勾选的实例
Sep 20 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
React自定义hook的方法
Jun 25 #Javascript
小程序实现侧滑删除功能
Jun 25 #Javascript
小程序自定义轮播图圆点组件
Jun 25 #Javascript
微信小程序实现轮播图指示器
Jun 25 #Javascript
create-react-app开发常用配置教程
Jun 25 #Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 #Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
HTML中事件触发列表与解说
2007/07/09 Javascript
jquery 学习之一 对象访问
2010/11/23 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
js正则表达式的使用详解
2013/07/09 Javascript
基于javascript实现窗口抖动效果
2016/01/03 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
2018/11/14 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JS实现放烟花效果
2020/03/10 Javascript
[05:01]3.19DOTA2发布会 我们都是刀塔人
2014/03/25 DOTA
安装Python的web.py框架并从hello world开始编程
2015/04/25 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
Python 操作文件的基本方法总结
2017/08/10 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
python Matplotlib模块的使用
2020/09/16 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
2018/06/01 HTML / CSS
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
大学毕业自我评价
2014/02/02 职场文书
商业活动邀请函
2014/02/04 职场文书
社区服务活动总结
2014/05/07 职场文书
表彰大会策划方案
2014/05/13 职场文书
关于 Python json中load和loads区别
2021/11/07 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers