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

2023-12-17 18:53:55

文章目录

目录

前言

一、创建公共模块

二、初始化公共模块

三、给公共模块添加内容

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

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

后记


前言

在工作中经常会遇到这样的需求,有个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>
  );
};

后记

这种模块依赖的方式,可以减轻维护重复代码的工作量。想要更新公共模块的话,直接修改保存即可,不用主项目里重新添加,直接就能看到最新的变化。

文章来源:https://blog.csdn.net/fenggering/article/details/125911079
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。