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

文章目录

目录

前言

一、创建公共模块

二、初始化公共模块

三、给公共模块添加内容

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

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

后记


前言

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

后记

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/228445.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker安装Redis+Sentinel哨兵集群,SpringBoot连接Redis集群配置

一、准备工作 两台Centos7服务器&#xff08;虚拟机即可&#xff09; 192.168.32.131&#xff08;主&#xff09;192.168.32.129&#xff08;从&#xff09; 两台服务器安装DockerDocker下载Redis镜像 二、Redis配置主从节点 1、131服务器安装Redis主节点 创建Redis配置文件…

DRAKE - 基于模型的机器人设计与验证 由丰田研究所支持的 C++ / Python 工具箱。

系列文章目录 前言 - 概述 Drake&#xff08;中古英语中的 "龙"&#xff09;是一个 C 工具箱&#xff0c;由麻省理工学院计算机科学与人工智能实验室&#xff08;CSAIL&#xff09;的机器人运动小组开发。目前&#xff0c;开发团队已大幅壮大&#xff0c;核心开发工作…

Vue3-21-组件-子组件给父组件发送事件

情景描述 【子组件】中有一个按钮&#xff0c;点击按钮&#xff0c;触发一个事件&#xff0c; 我们希望这个事件的处理逻辑是&#xff0c;给【父组件】发送一条消息过去&#xff0c; 从而实现 【子组件】给【父组件】通信的效果。这个问题的解决就是 “发送事件” 这个操作。 …

arthas获取spring bean

参考文章 arthas获取spring bean 写一个工具Util package com.example.lredisson.util;import org.springframework.beans.BeansException; import org.springframework.context.ApplicationContext; import org.springframework.context.ApplicationContextAware; import o…

HarmonyOS给应用添加消息通知

给您的应用添加通知 通知介绍 通知旨在让用户以合适的方式及时获得有用的新消息&#xff0c;帮助用户高效地处理任务。应用可以通过通知接口发送通知消息&#xff0c;用户可以通过通知栏查看通知内容&#xff0c;也可以点击通知来打开应用&#xff0c;通知主要有以下使用场景…

Cell Systems | 深度学习开启蛋白质设计新时代

今天为大家介绍的是来自Bruno Correia团队的一篇综述。深度学习领域的迅速进步对蛋白质设计产生了显著影响。最近&#xff0c;深度学习方法在蛋白质结构预测方面取得了重大突破&#xff0c;使我们能够得到数百万种蛋白质的高质量模型。结合用于生成建模和序列分析的新型架构&am…

相机倾斜棋盘格标定全记录 vs200+opencv安装

论文参考是这个 Geiger A, Moosmann F, Car , et al. Automatic camera and range sensor calibration using a single shot[C]//Robotics and Automation (ICRA), 2012 IEEE International Conference on. IEEE, 2012: 3936-3943. 代码是这个github 花了一上午配好了c环境。。…

Flink系列之:SQL提示

Flink系列之&#xff1a;SQL提示 一、动态表选项二、语法三、例子四、查询提示五、句法六、加入提示七、播送八、随机散列九、随机合并十、嵌套循环十一、LOOKUP十二、进一步说明十三、故障排除十四、连接提示中的冲突案例十五、什么是查询块 SQL 提示可以与 SQL 语句一起使用来…

Sci. Rep. | 一个对任意分子体系实现准确且高效几何深度学习的通用框架

这篇工作是来自纽约城市大学/康奈尔医学院谢磊团队的一篇论文。作者提出了一个通用框架&#xff0c;PAMNet&#xff0c;可以对任意分子体系实现准确且高效的几何深度学习。在小分子性质、RNA三维结构以及蛋白质-配体结合亲和力的预测任务上&#xff0c;PAMNet在准确性和效率方面…

Express中使用Swagger

Swagger Swagger 是一种规范&#xff0c;用于描述 API 的结构&#xff0c;功能和参数。使用 Swagger 可以提供清晰的可视化 API 文档&#xff0c;可用于 API 交互的文档驱动开发&#xff0c;以及 API 的自动化测试和集成。 使用 npm 或 yarn 下载。 npm install swagger-jsdo…

【ESXi】ESXi 版本回退

目录 8. ESXi 版本回退8.1 版本回退条件与注意事项8.2 版本回退步骤8.3 示例演示&#xff08;1&#xff09;准备工作&#xff08;2&#xff09;进入DCUI界面&#xff08;3&#xff09;按 F11 重启系统引导&#xff08;4&#xff09;进入引导选项&#xff08;5&#xff09;进入 …

弧形导轨的精度等级

为符合工控自动化生产制造必须&#xff0c;弧形导轨在运输武器装备领域应时而生&#xff0c;并已在电子生产制造、手机上、半导体材料、动力锂电池等领域获得广泛运用。其中&#xff0c;弧形导轨的精度等级是评估其运动精度的重要指标&#xff0c;通常包括制造精度和运行精度两…

Flink系列之:大状态与 Checkpoint 调优

Flink系列之&#xff1a;大状态与 Checkpoint 调优 一、概述二、监控状态和 Checkpoints三、Checkpoint 调优四、RocksDB 调优五、增量 Checkpoint六、RocksDB 或 JVM 堆中的计时器七、RocksDB 内存调优八、容量规划九、压缩十、Task 本地恢复十一、主要&#xff08;分布式存储…

spring-kakfa依赖管理之org/springframework/kafka/listener/CommonErrorHandler错误

问题&#xff1a; 整个项目使用spring-boot2.6.8版本&#xff0c;使用gradle构建&#xff0c;在common模块指定了implementation org.springframework.kafka:spring-kafka:2.6.8’这个工程也都能运行&#xff08;这正常发送kafka消息和接收消息&#xff09;&#xff0c;但是执行…

java --- 集合进阶

目录 一、单列集合顶层接口 Collection 1.1 基本方法 1.2 Collection 的遍历方式 二、list集合 1.2 ArrayList Vector 底层结构 1.3 LinkedList ArrayList 和 LinkedList 比较 三、set接口 3.1、Set 接口和常用方法 3.2 HashSet HashSet 底层机制&#xff08;HashMap…

VB.NET创建AOT无依懒的winform 独立EXE,动态库如何调用?

public a as long 9977public function add(a as long,b as long) as longaddab end function VB.NET用AOT编绎成独立EXE,只能生成无函数的dll(默认有个DotNetRuntimeDebugHeader&#xff09;&#xff0c;无法导出自有模块或类中的API EXPORT动态库 &#xff08;AOT只能生成64…

raise KeyError(key) from err KeyError: ‘sex‘

一、问题揪出&#xff1a; File “/usr/share/anaconda3/envs/tf2.0-gpu/lib/python3.7/site-packages/pandas/core/frame.py”, line 2906, in getitem indexer self.columns.get_loc(key) File “/usr/share/anaconda3/envs/tf2.0-gpu/lib/python3.7/site-packages/pandas/…

Vue 宝典之动画(transition)

文章目录 &#x1f951;Vue 过渡效果的基础概念&#x1fad2;<transition> 组件的基本用法&#x1fad2; 过渡类名&#x1fad2;CSS 过渡 &#x1f951;Vue.js 中的高级动画特性&#x1fad2;多个元素的过渡&#x1fad2;使用 JavaScript 钩子函数控制动画&#x1f346; …

四十六----react路由

一、react 路由使用 import {render } from "react-dom"; import {BrowserRouter,Routes,Route, } from "react-router-dom"; // import your route components too render(<BrowserRouter><Routes><Route path="/" element={&l…

Vue学习笔记-Vue3的toRef和toRefs

toRef 作用&#xff1a;创建一个ref对象&#xff0c;其value值指向与其绑定的数据对象中的某个属性&#xff0c;当toRef创建的对象值改变时&#xff0c;与其绑定的响应式对象中对应的属性也发生改变导入&#xff1a;import {toRef} from vue使用&#xff1a;const name toRef…