重构Concis组件库 | 基于lerna转为monorepo项目

·  阅读 737
重构Concis组件库 | 基于lerna转为monorepo项目

前言

博主最近在开发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-reactrollup.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组件库线上链接:react-view-ui.com:92 github:github.com/fengxinhhh/… npm:www.npmjs.com/package/con…

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

分类:
前端
收藏成功!
已添加到「」, 点击更改