免费网站app代码,哪家建站好,成都市公共资源交易服务中心,长沙县好的建站按效果付费文章目录
目录
前言
一、创建公共模块
二、初始化公共模块
三、给公共模块添加内容
四、添加对公共模块的依赖
五、使用公共模块里的资源 后记 前言
在工作中经常会遇到这样的需求#xff0c;有个React项目#xff0c;代码分为客户端#xff0c;管理端两份#xff…文章目录
目录
前言
一、创建公共模块
二、初始化公共模块
三、给公共模块添加内容
四、添加对公共模块的依赖
五、使用公共模块里的资源 后记 前言
在工作中经常会遇到这样的需求有个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);
}; 后记
这种模块依赖的方式可以减轻维护重复代码的工作量。想要更新公共模块的话直接修改保存即可不用主项目里重新添加直接就能看到最新的变化。
