前言

博主最近在开发React组件库——Concis，目前针对PC端已经开发了30+组件，未来是期望可以转换出一套轻量的Mobile组件来支持React移动端项目，而博主原来的项目结构是这样的：

其实这只是一个普通项目，在src中包含了一系列支持PC的React组件，而既然想要扩充，不妨使用lerna将多个子项目整合在一个大项目中。

重构过程

在本地全局安装lerna

npm i lerna -g  || yarn global add lerna

安装完成后执行 lerna -v 看下是否能够正确的输出 lerna 的版本号。

接下来进入到Concis中，在项目根目录初始化lerna

lerna init

初始化之后会发现项目根目录多了packages目录和lerna.json

接下来在packages中创建两个目录，分别为concis-react（目前的PC端组件库）和concis-react-mobile（未来的移动端组件库），并将原来根目录下的src复制到packages/concis-react中，同时删除根目录下的rollup.config.js，在concis-react、concis-react-mobile目录下分别创建出：

rollup.config.js 用于分别打包子包的代码块，用于发npm
package.json 子包的包管理文件
tsconfig.json TypeScript配置文件

同时我把根目录的README.md复制了一份到子包目录中，为了发npm包时也可以出现介绍内容，因为发子包是基于packages/xx目录去发布的，而github不用这样处理，经过处理后我的项目结构是这样的：

接下来配置package.json文件。

concis-react/package.json:

{"name": "concis","version": "1.0.16","description": "Concis Component library for PC","authors": {"name": "fengxin","email": "1244200081@qq.com"},"scripts": {"build": "rollup -c ./rollup.config.js"},"module": "es/index.js","typings": "es/index.d.ts","gitHooks": {"pre-commit": "lint-staged"},"files": ["web-react","README.md","README.zh-CN.md","package.json"],"publishConfig": {"registry": "https://registry.npmjs.org/"},"dependencies": {"@babel/plugin-transform-runtime": "^7.17.0","@babel/preset-react": "^7.17.12","core-js": "^3.22.2","lodash": "^4.17.21"},"peerDependencies": {"react": "^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies": {"@ant-design/icons": "^4.7.0"},"license": "MIT","gitHead": "ce812c263bec669470e12af97e9c737cbc05d730"
}

concis-react-mobile/package.json:

{"name": "concis-mobile","version": "0.0.1","description": "Concis Component library for Mobile","authors": {"name": "fengxin","email": "1244200081@qq.com"},"scripts": {"build": "rollup -c ./rollup.config.js"},"module": "es/index.js","typings": "es/index.d.ts","gitHooks": {"pre-commit": "lint-staged"},"files": ["web-react-mobile","README.md","README.zh-CN.md","package.json"],"publishConfig": {"registry": "https://registry.npmjs.org/"},"dependencies": {"@babel/plugin-transform-runtime": "^7.17.0","@babel/preset-react": "^7.17.12","core-js": "^3.22.2","lodash": "^4.17.21"},"peerDependencies": {"react": "^16.8.0 || ^17.0.0 || ^18.0.0"},"devDependencies": {"@ant-design/icons": "^4.7.0"},"license": "MIT","gitHead": "ce812c263bec669470e12af97e9c737cbc05d730"
}

两个子包的打包配置大同小异，配置项都一样，只需要对出口命名进行处理即可，这里贴一下concis-react的rollup.config.js

import typescript from 'rollup-plugin-typescript2';
import less from 'rollup-plugin-less';
import clear from 'rollup-plugin-clear';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import { terser } from 'rollup-plugin-terser';
import { uglify } from 'rollup-plugin-uglify';
import copy from 'rollup-plugin-copy';export default {input: ['./src/index.ts'],output: [{file: 'web-react-mobile/cjs.js',format: 'cjs',name: 'cjs.js',},{file: 'web-react-mobile/umd.js',format: 'umd',name: 'umd.js',},{file: 'web-react-mobile/index.js',format: 'es',name: 'index.js',},],plugins: [typescript(), less({ output: './web-react-mobile/style/index.css' }),clear({targets: ['web-react'],}),resolve(),commonjs(),babel({exclude: 'node_modules/**',runtimeHelpers: true,}),terser(),uglify(),copy({targets: [{ src: '../../scripts/globalStyle/compiled-colors.less', dest: 'web-react/style' }],}),],external: ['react', 'react-dom'],
};

tsconfig.json的处理则是继承根目录下的配置去做额外配置，有点类似webpack-merge的处理。

主配置:

{"compilerOptions": {"target": "es6","module": "es2015","lib": ["dom", "dom.iterable", "esnext"],"allowJs": true,"skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"strict": true,"forceConsistentCasingInFileNames": true,"moduleResolution": "node", //node环境"resolveJsonModule": true,"isolatedModules": true,"noEmit": true,"jsx": "react","baseUrl": ".","paths": {"@/*": ["./*"],"@/": ["./packages"]},"experimentalDecorators": true},"include": ["typings.d.ts", //配置的.d.ts文件"docs/guide"],"exclude": ["node_modules", "lib"]
}

子包:

{"extends": "../../tsconfig.json","compilerOptions": {"rootDir": "src","include": ["src","../../__tests__/concis-react",]}
}

发包

lerna有多种发包方式，这里我选择了根据各个子包的package.json版本号去发，这里有两个坑需要注意一下：

发包前，需要commit项目中的代码
需要手动更新package.json中的版本号，否则不会被检测到更新信息

注意这两点以后，在项目根目录执行

lerna publish from-package

出现提示后确认，即可发包，这里博主的发包结果：

就这样，组件库的项目结构重构完毕了，也更加清晰了，未来的阶段更多的就是在维护packages/concis-react的同时更新packages/concis-react-mobile中的组件。

重构后的项目结构如下：

Concis的地址

Concis已经开发了接近半年时间，也是越来越成熟了，这里留一下Concis的一些Path：

Concis组件库线上链接：http://react-view-ui.com:92
github：https://github.com/fengxinhhh/Concis
npm：https://www.npmjs.com/package/concis

开源不易，如果文章内容对你有帮助，请支持一下，非常感谢。

基于lerna重构Concis组件库相关推荐

如何开发一个基于 Vue 的 ui 组件库
如何开发一个基于 Vue 的 ui 组件库开发模式预览 demo 在开发一个 ui 组件库时,肯定需要一边预览 demo,一边修改代码. 常见的解决方案是像开发一般项目一样使用 webpack-d ...
基于Vue结合Vant组件库的仿电影APP
Vue综合案例 Vue综合案例一.项目概要 1.效果前瞻 2.开发流程 3.开发环境二.初始化及必要知识点 1.初始化远程仓库 2.创建项目 3.路由规划 4.反向代理配置 5.网络请求封装 6. ...
Concis组件库封装——Badge徽标
徽标其实和上文的Avatar头像是配套的,通常徽标的需求都是在头像的基础上提供的,因此本文将介绍徽标组件的封装,徽标其实是一个展示类组件,并没有什么交互,因此这个组件实现起来比较简单~ 先看一下组件库 ...
Concis组件库封装——LazyLoad懒加载
懒加载组件,支持任意元素进行延迟加载,可以在SPA单页应用首页渲染时减少非可视区的DOM渲染,加快首屏渲染效率,大致用法: <LazyLoad><div><span> ...
Concis组件库封装——Rate评分
Rate评分组件官方文档如下: 源码如下: import React, { FC, useState, useEffect, memo, useCallback } from 'react'; imp ...
vue 字典_【开源】基于Vue的前端组件库HeyUI
说道vue组件库,目前主流的基本就是iview和element.今天又发现一个很不错的.HeyUI. 组件也很丰富,入门比较简单. 反正开源框架我们有不嫌多,多多益善啊.感兴趣的可以看看. 关于Hey ...
npm 编译打包vue_从零到一教你基于vue开发一个组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完徐小夕:如何从0到1教你搭建前端团队的组件系统zhuanlan.zhihu.com 之后很多朋友希望了 ...
cli3解决 ie11语法错误 vue_从零到一教你基于vue开发一个组件库高性能前端架构解决方案...
Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.虽然笔者有近2年没有从事vue的开发了,但平时一直在关注vue的更新和发展,笔者一直认为技术团队的组件化之路重点在于基础架 ...
uiw 1.2.17 发布，基于 React 16 的组件库
发布, 高品质的UI工具包,React 16+的组件库. 文档网站:uiw-react.github.io 开源仓库:github.com/uiw-react/u- 更新内容: ? 修复没有代码检测文 ...

基于lerna重构Concis组件库

lerna重构Concis项目

前言

重构过程

发包

Concis的地址

基于lerna重构Concis组件库相关推荐

最新文章

热门文章