前言

博主最近在开发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:

扫描二维码关注公众号，回复： 14415160 查看本文章

{
  "name": "concis",
  "version": "1.0.16",
  "description": "Concis Component library for PC",
  "authors": {
    "name": "fengxin",
    "email": "[email protected]"
  },
  "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": "[email protected]"
  },
  "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",
      ]
  }
}

复制代码