第五章:React开发之目录,文件及配置详解
配置文件和扩展文件类型
目录
导言
具体解析package.json,config.json及扩展文件属性
配置文档
项目结构
config.js:umi的配置文件,当此文件存在时,默认生成的umi自带路由会无效,优先使用config.js
routeconfig:是用户自定义的config.js中routes节点的,延伸配置文件,用来单独管理routes(路由配置)节点信息,让config看起来更简洁清爽
node_modules项目初始化时自动生成的用来存放插件的文件夹
scrpages/page这两个文件夹是umi路由约定的源码存放目录.
home组件名称(路由中会定位到这个文件夹),此处可以理解为"定义了一个叫home的页面"其下文件为这个组件(页面)的具体模块组件(局部页面),最后成为一个完整的组件(页面)内容.
index.js理解为"home组件的入口文件",以前的理解是这是一个页面,但是此处他是一个umi规则的组件入口约定文件,当路由指向home时,会自动来找这个index.js文件.所以,你在路由配置时,无需配置到index.js,只要配置到home就可以了.[他是home的一个子件]
.umi这是umi生成的默认配置,包含了默认路由规则,但是我们一般自己定义路由规则,使用config.js来代替它.当然它还有一些其他内容,在生成时是不会出现这个文件夹的.只在开发时会出现,无需处理,而且你也无法删除,它会不停的自动生成!
package.json:项目配置文件,配置项目的版本,指令,插件信息等.
yarn.lock:yarn的插件版本锁定文件
package.json
主要配置
{
"name": "test", //项目名称
"version": "1.0.0", //项目版本号(大版本.次版本.小版本)
"main": "index.js", //入口文件
"license": "MIT", //项目许可证，让使用者知道是如何被允许使用此项目。默认是”ISC”
"devDependencies": { //指定项目[开发时]所需要依赖的插件模块
"umi": "^2.8.16" //umi模块
},
"dependencies": { //指定项目[运行时]所需要依赖的插件模块
"antd": "^3.21.2" //ui模块
},
"scripts": { //配置模块的yarn/npm的执行命令
"go":"umi dev", //使用yarn run go来代替和执行yarn run umi dev
"build":"umi build" //使用yarn run build来代替和执行yarn run umi build
}
}
"dependencies/devDependencies版本号说明"
//以1.2.3(大版本.次版本.小版本)版本为例
"~" //表示为:允许区间在小版本范围内变化.如:1.2.0~1.2.9之间
"^" //表示为:允许区间在次版本范围内变化,如:1.0.0~1.9.9之间
"latest" //表示为:无论什么版本都将安装最后的,最新的版本.
"scripts两个主要属性说明"
"go":"umi dev", //相当于vs中的启动按钮,或者F5的效果
"build":"umi build" //相当于vs中的生成和发布功能的合体效果,编译的同时也发布了项目
其他配置
"peerDependencies": {} //指定插件其所需要的主工具版本
"bin": "" //将具有执行能力的模块插件记录在bin中,其后可以在控制台中使用命令执行,如安装umi后可以直接在控制台使用umi list的命令一样
"config": {} //用于添加命令行环境变量
"browser":"" //配置浏览器的打包工具
"engines": {} //指定模块的运行平台,如node或浏览器的运行版本
"man": [] //指定man文档的位置
"preferGlobal": false/true //在不用-g/global参数时是否显示告警
"style":"" //供浏览器使用时指定模块的css文件位置,打包工具根据路径找到文件并打包.同[browser]?
Eslint配置
-
使用目的
是需要使用git时使用,在commit提交时对文件进行Eslint标准规范检测,如有错误则会中止提交并输出错误
-
安装插件(husky和lint-staged)
#husky注册git hook yarn add husky lint-staged --dev -
配置插件
//添加hook函数 "scripts": { "precommit": "lint-staged", //git的commit会执行这个命令，这个命令再调起lint-staged }, "lint-staged": { //配置lint-staged "*.{js,jsx}": [ //表示所有的js和jsx都要经过监测 "eslint --fix", //表示自动修复错误 "git add" //表示重新提交修复后或监测后的正确代码 ] } -
其他解释
precommit:是husky的配置,原本是个泛路径(如"src/xx/x.js"),当指向lint-staged时,将需要监测的内容交给lint-staged来处理
lint-staged:将lint移到本地,只监测被修改过的代码,大大减少了lint报出的无关错误,再使用eslint --fix自动修复错误 -
参考文档
config.js
主要配置
import pageRoutes from './routerconfig'; //引入路由配置文件
export default {
plugins: [
['umi-plugin-react', { //这是官方封装的一个插件集，包含 18 个常用的进阶功能。
antd: true, //开启Ant Design:蚂蚁金服的Ui设计插件,类似于Bootstrap
dva: { //开启基于redux和redux-saga 的数据流方案
immer: true //配置immer优化方案
},
dynamicImport: false, //路由级的动态加载
title: 'test', //项目级title名称(注:如需其他页面有独自的title可在路由器中加入title属性)
dll: false, //webpack 的 dll 插件预打包一份 dll 文件来达到二次启动提速的目的
routes: { //配置需要忽略的一些文件,使其不产生路由地址
exclude: [
/models\//, //忽略模型层文件夹
/services\//, //忽略数据链接层文件夹
/model\.(t|j)sx?$/, //忽略model.jsx或model.tsx
/service\.(t|j)sx?$/, //忽略service.jsx或者service.tsx
/components\//, //忽略组件层文件夹
],
},
}],
],
disableCSSModules: true, //禁用 CSS Modules
disableCSSSourceMap: true, //禁用 CSS 的 SourceMap 生成
routes: pageRoutes, //配置引用的路由器
proxy: { //配置一个代理路由
"/api": { //当输入/api时,跳转到target位置
target: "http://localhost:1222",
},
"/download": { //当输入/download时,跳转到target位置
target: "http://localhost:1223/",
}
}
}
参考文档
官网
umi-plugin-react
routerconfig.js
主要配置
export default[
{
path:'/', //(/)代表直接定位到umi路由约定的src>pages下
component:'./home', //代表,在path下的home页面
title:'首页' //component的页面显示的title名称
}
]
扩展文件及相关技术说明
React
是一种声明式,组件化一次编写到处使用的帮助用户快速搭建和服务器上渲染的一种技术框架
- 类型:插件
- 本质:框架
ES6
全名<EMCAScript 6>JavaScript是ES标准的一种实现,ES是JS的标准,ES是国际化标准的脚本程序设计语言,借此可实现大型化企业开发.
- 类型:设计语言
- 本质:高级js
React-Redux
面向JavaScript应用的可预测状态容器,它是专门用来状态管理的容器,借助它可以控制状态的改变,时间,原因,和方式
- 类型:插件
- 本质:就是个监测数据的
React-Native
React的的移动版本
- 类型:插件
- 本质:移动版框架
React-Dom
把React生成的虚拟Dom渲染成实际的Dom
- 类型:插件
- 本质:用来生成html的
React-Router
保证试图和Url同步,用户操作时,应用会在若干个状态(页面)中切换,Router可对此进行监视,甚至干涉,如在Router中加入浏览权限等.
- 类型:插件
- 用来控制跳转的
JSX
是JavaScript的一种扩展,可以将其视为JavaScript+XML,编写代码时看起来像模块语言,但实质上是js实现,React使用JSX来描述用户界面,和声明React中的元素,而元素是构成React应用的最小单位,一般来说JSX使用ES6标准.jsx无需单独的文件类型,可直接在js中使用.
- 类型:文件
- 本质:JS的扩展,以及编页面的地方
Redis
一种内存级的数据结构存储系统,可用作数据库,缓存,中间件,支持string,hash,set,有序集合,bitmaps,Hyperloglogs和地理空间索引半径查询,可以在磁盘中也可以在内存中,但主要是为了解决缓存和并发,而存在与读取速度更快的内存中.它使用单线程多路I/O复用,非阻塞同步,同一时间只能执行一个命令,解决方案,启用多实例
- 类型:轻量级数据库
- 本质:服务器端数据存储或中转站
Ant Design(Ant Design of React)
简称Antd,是蚂蚁金服开发的一种开源交互和视觉风格的React组件,使用TypeScript构建,支持IE9以上(需要Polyfills),支持服务器端渲染
同类型的有Bootstrap,layui,EsayUi等
- 类型:UI框架
- 本质:一款专为React定制的Ui框架
VsCode
VSCode（Visual Studio Code）是由微软研发的一款免费、开源的跨平台文本（代码）编辑器，算是目前前端开发几乎完美的软件开发工具。
- 类型:安装软件
- 本质:开发使用的软件
webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
- 类型:核心插件
- 本质:将所有的资源打包成传统的浏览器识别资源,就像vs的发布后,将.cs文件转换成dll文件.
- 对比:相当于VS里的<发布>功能.
babel
JavaScript转译器,为了解决js新技术不能被现有的老版本浏览器兼容而存在的转化工具,使老浏览器也能兼容新技术,最终所有的代码都将通过babel转化.
- 类型:核心插件
- 本质:将所有的代码转译成传统的代码,并兼容新老浏览器.
- 对比:相当于VS的<生成>功能.
Node.js
使JavaScript能够脱离浏览器运行的一种技术,他是费阻断异步I/O,事件驱动的JavaScript运行环境,基于Google的V8引擎,速度快,性能好
node.js一般服务器用不到,但在开发时需要,这是因为npm/yarn等插件,软件是基于Node.js的
node.js于FromeWork同级,也可以参与系统性编程,和我们的Net一致,只不过是由JavaScript完成,后端要不要安装取决于你的程序是JavaScript写的还是其他语言写的,如果是前者或者是涉及到前者则就需要安装了.
- 类型:核心安装软件
- 本质:底层环境,运行时
- 对比:与FromeWork同级
浙公网安备 33010602011771号