【如何提取React项目中的公共模块，多个项目共用】

news2024/11/22 16:35:33

文章目录

前言

一、创建公共模块

二、初始化公共模块

三、给公共模块添加内容

四、添加对公共模块的依赖

五、使用公共模块里的资源

后记

前言

在工作中经常会遇到这样的需求，有个React项目，代码分为客户端，管理端两份，各自可以独立运行发布，但是两份代码里有很多可以共用的文件，比如封装好的工具，实体类，UI组件等，这些可共用的代码如果两边各一份的话，每次需要修改就得两边都修改一遍，很不方便。

那么我们就想，是不是可以把共用部分提取出来成为一个公共模块，然后在客户端和管理端代码里都引入这个模块使用。这样如果公共代码只用改一遍就好了，维护就方便得多。

具体怎么实现呢?可以按下面的步骤操作。

一、创建公共模块

我们先在项目代码同级目录下创建个目录，取名为common。

二、初始化公共模块

进入这个common目录，用命令行在当前目录下运行npm init初始化这个模块，命令行会让你设置此模块的各种信息，可以自定义设置也可以一路敲回车。效果如下：

% npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (common) 
version: (1.0.0) 
description: 公共基础模块
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) 
About to write to /Users/lile/sktlab/Web/ablenet/source/front/common/package.json:

{
  "name": "common",
  "version": "1.0.0",
  "description": "公共基础模块",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes) yes

完成后common目录下就会产生一个package.json文件。

{
  "name": "common",
  "version": "1.0.0",
  "description": "公共基础模块",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

三、给公共模块添加内容

这一步就是把想要抽取的公共代码都放到这个common模块来。

添加这些公共代码的时候，我们发现可能这些代码用到了一些第三方库，我们就得安装这些依赖，否则代码报错。比如安装MUI：

npm install @mui/material @emotion/react @emotion/styled

安装完成后，common目录下会生成一个packag-lock.json文件，同时

package.json文件会更新：

{
  "name": "common",
  "version": "1.0.0",
  "description": "公共基础模块",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.15.0"
  }
}

OK依赖的库添加完成，我们为了测试方便，直接新建几个测试文件：

在common下新建一个src目录，用来放代码，然后src下又新建一个model目录，用于放公共实体类；src下新建一个component目录用于放公共组件。

在model目录下写一个MyUser实体类，在component目录下写一个MyTitle组件，这些准备在主项目里用到。用VSCode打开效果如下：

MyTitle.tsx内容如下：

import { Typography, styled } from "@mui/material";

export const MyTitle = styled(Typography)({
    color: "red",
    fontSize: "18px",
    fontWeight: 600
})

export default MyTitle;

MyUser.ts文件内容如下：

export interface MyUser {
  id: string;
  name: string;
  avatar: string;
}

export default MyUser;

四、添加对公共模块的依赖

功能模块内容添加完成后，如何在主项目里使用它呢？

我们先给客户端项目添加common模块的依赖，在客户端项目的根目录下，运行这个命令：

npm install "../common"

注意这个路径，因为我们把客户端代码目录和common模块代码目录放在同一个文件夹下，所以路径是"../common"，如果你不放在同一目录，这里需要相应地调整命令。

如果因为版本冲突安装不成功，上面的命令可以加上--force 或 --legacy-peer-deps。

添加后，我们会看到客户端项目的package.json的"dependencies"部分已经加上了对common模块的依赖：

"common": "file:../common",

同时我们可以在客户端项目生成的node_modules文件夹下找到common目录。这就表示添加成功了。

用同样的方式，可以在管理端项目代码里添加对common模块的依赖。

五、使用公共模块里的资源

到这一步，我们就可以在客户端和管理端里使用common模块的资源了，比如使用MyUser类和MyTitle组件：

import { type FC } from "react";
import { type MyUser } from "common/src/model/MyUser";
import { MyTitle } from "common/src/component/MyTitle";
import { Box } from "@mui/material";

const UserInfo: FC = () => {
  const user: MyUser = { id: "1", name: "John", avatar: "" };

  return (
    <Box sx={{ textAlign: "center", width: "100%" }}>
      <MyTitle>{user.name}</MyTitle>
    </Box>
  );
};