简介
对开发react 脚手架做一个简单流程介绍~
详见使用过程请在npm 官网(www.npmjs.com/)搜索 csute,sute
极狐gitlab地址:
sute: jihulab.com/sute/sute
csute:jihulab.com/sute/sute_c…
csute
相关库
开发流程
创建项目
- 选择所需依赖
根据inquirer 库选择所需要安装的依赖.
- 自动拉取项目模板
通过download-git-repo 下载在gitlab,github中写好的代码模板
- 安装项目依赖
修改项目中package.json 在devDependencies写入所选择的依赖 eg: sass": '^1.56.1',
-
自动启动项目 在终端执行 npm install 安装依赖
-
打开浏览器 http://localhost:8080/
通过 open 库,启动本地服务
创建组件和store
- 通过命令行传入组件名或store名,或者传入路径,不传有默认路径
- 通过EJS模板写入组件名和路径
- 将写入的模板写入在项目中对应的位置
模板介绍
js模板比较简单,以下只介绍ts模板较难理解的部分
js模板链接:jihulab.com/style1/reac…
ts模板链接:jihulab.com/style1/reac…
网络请求
取消请求
- 在每次请求拦截时添加控制器对象,并存放在Map数据结构中
- 在请求成功时取消拦截
拦截器
类拦截,实例拦截, 请求拦截.
参考链接:juejin.cn/post/707151…
storage
对localStorage,sessionStorage进行二次封装
- 添加前缀prefix
- 添加过期时间expire
- 添加加密,解密.
参考链接: juejin.cn/post/723744…
sute
获取初始化的配置
dev和build时,先new Config()类获取配置
- 保存sute.config.js 自定义的配置 在extraOptimizeConfig 属性中
- 保存webpack 配置在commonConfig 中
- 保存webpack-dev-serve 服务器配置在serviceConfig 中
- 端口检测在devCheckPort()和changePort() 方法中
获取dev和build的配置
将new Config() 后的实例配置传递给exeConfig()
exeConfig()
- process.env.NODE_ENV 确定dev 还是prod 环境
- 执行webpackConfig类获取common公共配置
- 合并dev配置
- 合并prod配置
webpack配置拆分
- 将webpack配置裁为 common 公共配置 dev 配置 prod配置
- 再将公共的webpack 配置拆分为plugin 和loaders
- loader拆分为assets script style babel.
WebpackConfig
合并基础配置
- cache() 缓存
- resolve 自动生成别名等
dev
dev配置
prod
- prod配置
- deploy 自定义plugin实现.
script
- [jt]sx 文件采用babel,esbuild 还是swc 处理
- 是否开启多线程打包.
执行
通过webpack 和webpack-dev-serve 执行webpack配置
prod
将exeConfig 获取到的配置执行给webpack
dev
先将配置执行给webpack 返回compiler
将返回的compiler 和服务器的配置(new Config() 实例绑定的serviceConfig)传递给webpack-dev-serve中.
参考链接:
esbuild :esbuild.docschina.org/
swc:www.swc.net.cn/
其他链接:
