react工程化配置

道阻且长，行而不辍，未来可期

1.安装react

yarn create react-app demo --template typescript
cd demo
yarn start

2.配置蓝图模版

2.1安装blueprint插件
请添加图片描述

https://github.com/shredor/blueprint-templates-cli#readme
yarn add blueprint-templates-cli

2.2创建一个blueprint-templates文件夹
请添加图片描述
创建文件的时候会出现New File from Template的选项
请添加图片描述
输入文件的名字，便会根据模版动态的创建文件

注意⚠️：在vscode中需要直接打开项目，而不能打开项目的父文件
error如下图所示
请添加图片描述
项目的名字叫template，父文件叫“未命名文件夹7”
vs打开的是父文件,然后创建文件夹的时候如果选New File from Template就会报错
错误如下。
错误：No templates found. Please see https://github.com/reesemclean/blueprint for information on setting up Blueprint in your project.
可以去仓库中查看我的蓝图模版：https://github.com/1linan/template

创建模版后：

找不到模块“react”或其相应的类型声明。

请添加图片描述
安装react的类型

yarn add @types/react --dev

3.配置less + less module

在react项目中如果我们想修改默认的webpack配置，我们可以通过eject导出默认配置文件进行修改
但是这样的操作是不可逆的。更推荐使用craco或者react-app-rewired这样的工具来达到修改webpack的目的。

我选择的是craco工具
3.1在工程中引入craco 和 craco-less

yarn add @craco/craco  
yarn add craco-less

3.2修改package.json
打开package.json文件，修改 package.json 里的 scripts 属性。

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

3.3在项目根目录创建一个 craco.config.js 用于修改默认配置。

const CracoLessPlugin = require("craco-less");
const { loaderByName } = require("@craco/craco");module.exports = {plugins: [{plugin: CracoLessPlugin,options: {modifyLessModuleRule(lessModuleRule, context) {// Configure the file suffixlessModuleRule.test = /.module.less$/;// Configure the generated local ident name.console.log(lessModuleRule)const cssLoader = lessModuleRule.use.find(loaderByName("css-loader"));cssLoader.options.modules = {localIdentName: "[local]_[hash:base64:5]",};return lessModuleRule;},},},],
};

如果使用的是TypeScript编程，则在react-app-env.d.ts.文件中添加以下内容，解决模块问题

declare module '*.module.less' {const classes: {readonly [key: string]: string}export default classesdeclare module '*.less'
}

4.配置别名路径

4.1在craco.config.js 文件中添加如下配置

const path = require('path')
module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定：使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src'),// 约定：使用 @scss 表示全局 SASS 样式所在路径// 在 SASS 中使用'@scss': path.resolve(__dirname, 'src/assets/styles')}}
}

4.2在tsconfig.json中添加如下配置

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"],"@scss/*": ["src/assets/styles/*"]}}
}

4.3 在./tsconfig.json中新增一条配置, “extends”: “./path.tsconfig.json”

{"extends": "./path.tsconfig.json","compilerOptions": {"target": "es5","lib": ["dom","dom.iterable","esnext"],...
}

5.ESLint+Prettier

5.1 添加ESlint的配置

ESLint的主要功能包含代码格式和代码质量的校验。
Prettier 是一款代码格式化工具，用于检测代码中的格式问题，比如单行代码长度、tab长度、空格、逗号表达式等。更偏向于统一项目的编码风格。

yarn eslint --dev
yarn add eslint-config-prettier eslint-plugin-prettier prettier --dev
yarn add @typescript-eslint eslint-plugin-react --dev

prettier 需要用prettier对代码的格式进行检查和修正，下载prettier包
eslint-config-prettier:关闭不必要的或者可能和Prettier冲突的规则

eslint-plugin-react：插件–React 代码规范的校验规则

  • react/jsx-key:用来检查是否声明了 key 属性
  • no-array-index-key:用来检查是否使用了数组索引声明 key 属性

react-hooks：React hooks 代码规范的校验规则

  • rules-of-hooks: 用来检查 Hook 的规则(不能 if/循环中使用 Hooks)
  • exhaustive-deps 规则，此规则会在useEffct添加错误依赖时发出警告并给出修复建议

创建.eslintrc.cjs

module.exports = {env: {browser: true,es2021: true,node: true},extends: ["eslint:recommended", //作为基本规则集,继承eslint官方推荐的一些配置"plugin:react/recommended", //作为基本规则集"plugin:@typescript-eslint/recommended", //作为基本规则集,继承了一个由typesript官方提供的适合于ts代码检查的配置"prettier", //由于eslint和prettier都具备代码格式化的功能，并且可能出现冲突,所以继承eslint-config-prettier"plugin:prettier/recommended"],parser: "@typescript-eslint/parser", //作为ESlint的解析器，将Ts代码纳入ESLint校验范围,因为eslint默认的parser智能解析js,所以配置了parserparserOptions: {//对parser进行配置ecmaFeatures: {jsx: true},ecmaVersion: "latest",sourceType: "module"},plugins: ["react","@typescript-eslint","prettier", //注册eslint-plugin-prettier插件"import","eslint-plugin-react", //注册插件,React 代码规范的校验规则//react/jsx-key:用来检查是否声明了 key 属性//no-array-index-key:用来检查是否使用了数组索引声明 key 属性"react-hooks" //React hooks 代码规范的校验规则//rules-of-hooks: 用来检查 Hook 的规则(不能 if/循环中使用 Hooks)//exhaustive-deps 规则，此规则会在useEffct添加错误依赖时发出警告并给出修复建议],rules: {//开启eslint-plugin-prettier中的prettier规则//开启这条规则后，会将prettier的校验规则传递给eslint，这样eslint就可以按照prettier的方式来进行代码格式的校验"prettier/prettier": "error", //表示被prettier标记的地方抛出错误信息。quotes: ["error"], // // 字符串必须使用双引号，否则报错"react/jsx-boolean-value": 1,"react-hooks/rules-of-hooks": "error","react-hooks/exhaustive-deps": "warn","react/prop-types": "off",//Typescript 中,必须明确指定函数的返回值类型。并且函数中的return后的类型必须与指定的类型一致 参考文档/*下面是一个 "explicit-module-boundary-types" 规则的栗子// 会出现 explicit-module-boundary-types警告export default function () {return 1;}// 下面的函数不会出现警告export var fn = function (): number {return 1;};*/"@typescript-eslint/explicit-module-boundary-types": "off",//关闭explicit-module-boundary-types，TS 中可以通过类型推断判断出函数的返回值类型，因此可以关闭此 Lintsemi: ["error", "always"],"react/react-in-jsx-scope": "off","import/order": ["error",{alphabetize: {order: "asc"}}]}
};

添加 NPM 脚本

{"script": {"lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ","lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src","lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx"}
}

lint-staged:js: 只校验后缀名为".js,.jsx,.ts,.tsx"的文件
lint:js: 只校验src目录下,后缀名为".js,.jsx,.ts,.tsx"的文件中,被修改过的文件。这会生成一个.eslintcache文件用来缓存已校验过的文件
lint:fix: 根据 .eslintcache文件，校验被修改过的文件。并且自动修复

创建.eslintignore
如果需要屏蔽不需要检测的文件或目录，可以在项目根目录添加 .eslintignore

build
output
node_modules
src/idl
lib
.temp/
mock.js
.eslintrc.js
idl/

5.2添加 Prettier 代码自动格式化工具

yarn add prettier  --dev

在项目根目录新建.prettierrc 并加入以下内容

module.exports = {printWidth: 100, //一行的字符数，如果超过会进行换行，默认为80tabWidth: 2, //一个tab代表几个空格数，默认为2useTabs: false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减singleQuote: false, //字符串是否使用单引号，默认为false，使用双引号semi: true, //如果 semi 设置为 true，将在语句末尾加上; trailingComma: "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"bracketSpacing: true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }endOfLine: "auto",//换行符使用lfproseWrap: "preserve",//使用默认的折行标准htmlWhitespaceSensitivity: "ignore",sxBracketSameLine: false, tsxBracketSameLine: false,jsxBracketSameLine: false,/**// true example<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here</button>// false example<buttonclassName="prettier-class"id="prettier-id"onClick={this.handleClick}>Click Here</button>*/
};

为VSCode 安装 Prettier 插件
请添加图片描述
通过在“设置”中勾选“保存时进行格式化”选项， 就可以在文件保存时使用 Prettier 进行自动格式化

如果需要屏蔽不必要的文件，可以在项目根目录添加 .prettierignore并加入以下内容

*.svg
package.json
.DS_Store
.eslintignore
*.png
*.toml
.editorconfig
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
/build
/public

添加 npm 脚本

"script":{"lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto","prettier": "prettier -c --write \"src/**/*\""
}

lint:prettier:当想要检查文件是否已被格式化时，则可以使用–check标志（或-c）运行 Prettier。这将输出一条语义化的消息和未格式化文件的列表。上面脚本的意思是格式化src目录下的所有文件
prettier:重新格式化所有已被处理过的文件。类似于eslint --fix的工作。上面脚本的意思是重新格式化src目录下的所有文件

6.添加 stylelint

 "stylelint-config-prettier": "^9.0.5","stylelint-config-recess-order": "^4.0.0","stylelint-config-standard": "^30.0.1","stylelint-prettier": "^3.0.0",

新建 .stylelintrc.js并加入以下内容

module.exports = {// 继承一系列规则集合extends: ['stylelint-config-standard',],rules: {"indentation": 4,//# 缩进 4 个空格"string-quotes": "double",//使用双引号"declaration-block-trailing-semicolon": "always",//每个属性声明末尾都要加分号"declaration-empty-line-before": [//第一条属性声明前不允许有空行"never",{ ignore: [ "after-declaration" ] }],"rule-empty-line-before": [//每个样式规则前后都有空行，除了第一条规则与规则前有注释"always",{ except: [ "after-single-line-comment", "first-nested" ] }],"max-empty-lines": 1,//不允许超过一行的空行"no-eol-whitespace": true,//每行句末不允许有多余空格"no-missing-end-of-source-newline": true,//文件末尾需要有一个空行//大小写处理"unit-case": "lower","color-hex-case": "upper","value-keyword-case": "lower","function-name-case": "lower","property-case": "lower","at-rule-name-case": "lower","selector-pseudo-class-case": "lower","selector-pseudo-element-case": "lower","selector-type-case": "lower","media-feature-name-case": "lower",/****** */"block-opening-brace-newline-after": ["always"],"block-closing-brace-newline-before": ["always"],/*** demo * 正确* a{* color:red* }* * 错误* a{color:red}* a{color:red* }* a{* color:red}*//****** */// "selector-class-pattern":"^[a-z][a-zA-Z0-9]+$",//className命名为小驼峰},// 忽略其他文件，只校验样式相关的文件ignoreFiles: ["node_modules/**/*","public/**/*","build/**/*","**/*.js","**/*.jsx","**/*.tsx","**/*.ts",],
};

配置stylelint时常见问题
请添加图片描述
stylelint中className的命名
请添加图片描述
如果需要屏蔽不必要的文件，可以在项目根目录添加 .stylelintignore，并添加一下内容

node_modulesdist
public
docs
bin.husky
.local
.vscode
.idea
.cache*.md
*.woff
*.ttf

7.配置Git Hook
husky是一个gitHook工具，可以配置 git 的一些钩子，这里配置一个commit钩子。
在 git commit 命令运行时先校验 lint（eslint, stylelint 等）是否通过，未通过则不予提交。

lint-staged 是一个在 git 暂存文件上运行 lint 校验的工具，配合 husky 配置 commit 钩子，用于 git commit 前的强制校验

yarn add husky lint-staged --dev

{"scripts": {"precommit": "lint-staged","lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx"},"husky": {"hooks": {"pre-commit": "lint-staged"}},"lint-staged": {"**/*.less": "stylelint --syntax less","**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js","**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]}
}

在每次 git commit 之前会进入工作区文件扫描，自动修复 eslint/stylelint 问题再使用 prettier 自动格式化，最后再提交到工作区。

注意⚠️：必选先使用git init 初始化 git 仓库，之后使用 husky 才能生效

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

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

相关文章

PB:DDE服务器函数

PB:DDE服务器函数

1、GetCommandDDE() 功 能：得到DDE客户应用发送的命令。 语 法：GetCommandDDE ( string ) 参 数：string：string类型的变量，用于保存DDE客户应用发送的命令。 返回值：Integer。函数执行成功时返回1，发生错误时返回-1。如果string参数的值为NULL， GetCommandDDE()…
阅读更多...
WAF绕过-漏洞利用篇-sql注入+文件上传-过狗

WAF绕过-漏洞利用篇-sql注入+文件上传-过狗

WAF绕过主要集中在信息收集&#xff0c;漏洞发现&#xff0c;漏洞利用&#xff0c;权限控制四个阶段。 1、什么是WAF&#xff1f; Web Application Firewall&#xff08;web应用防火墙&#xff09;&#xff0c;一种公认的说法是“web应用防火墙通过执行一系列针对HTTP/HTTPS的安…
阅读更多...
webpack基础知识六：说说webpack的热更新是如何做到的？原理是什么？

webpack基础知识六：说说webpack的热更新是如何做到的？原理是什么？

一、是什么 HMR全称 Hot Module Replacement&#xff0c;可以理解为模块热替换&#xff0c;指在应用程序运行过程中&#xff0c;替换、添加、删除模块&#xff0c;而无需重新刷新整个应用 例如&#xff0c;我们在应用运行过程中修改了某个模块&#xff0c;通过自动刷新会导致…
阅读更多...
《编程匠艺》读书笔记(二)

《编程匠艺》读书笔记(二)

文章目录 前言七、代码工具7.1 在意工具7.2 了解工具7.3 选择工具 八、代码测试8.1 Why/Who/What/When/How8.2 测试类型8.3 测试原则 九、代码bug调试9.1 bug种类9.2 调试解决bug9.3 搜寻bug9.4 修正bug 十、代码构建10.1 编程语言10.2 构建系统 十一、代码优化11.1 优化是什么…
阅读更多...
【C#学习笔记】装箱和拆箱

【C#学习笔记】装箱和拆箱

文章目录 装箱和拆箱性能消耗装箱拆箱 比较var&#xff0c;object&#xff0c;dynamic&#xff0c;\<T\>varobject\<T\> 泛型dynamic 装箱和拆箱 在讲引用类型object的时候&#xff0c;我们说它是万能的&#xff0c;却没说它万能在哪里。 除了object为每一种变量…
阅读更多...
Grafana集成prometheus(4.Grafana添加预警)

Grafana集成prometheus(4.Grafana添加预警)

上文已经完成了grafana对prometheus的集成及数据导入&#xff0c;本文主要记录grafana的预警功能&#xff08;以内存为例&#xff09; 添加预警 添加入口&#xff08;2个&#xff09; databorard面板点击edit&#xff0c;下方有个Alert的tab&#xff0c;创建Alert rules依赖…
阅读更多...
ffmpeg + nginx 实现rtsp视频流转m3u8视频流，转码推流(linux)

ffmpeg + nginx 实现rtsp视频流转m3u8视频流，转码推流(linux)

FFmpeg即是一款音视频编解码工具&#xff0c;同时也是一组音视频编码开发套件&#xff0c;作为编码开发套件&#xff0c;它为开发者提供了丰富的音视频处理的调用接口。 FFmpeg提供了多种媒体格式的封装和解封装&#xff0c;包括多种音视频编码、多种协议的流媒体、多种多彩格式…
阅读更多...
Redis常见面试题

Redis常见面试题

Redis面试题 1、什么是 Redis? Redis 是完全开源免费的&#xff0c;遵守 BSD 协议&#xff0c;是一个高性能的 key-value 数据库。 Redis 与其他 key - value 缓存产品有以下三个特点&#xff1a; Redis 支持数据的持久化&#xff0c;可以将内存中的数据保存在磁盘中&#…
阅读更多...
Linux内核网络参数调优命令

Linux内核网络参数调优命令

文章目录 ulimit -nsomaxconn Socket参数netdev_max_backlog参数tcp_max_syn_backlog参数 ulimit -n ulimit -n 是用于查看或设置当前用户进程打开文件描述符的最大值。文件描述符是操作系统用来访问文件或者其他I/O资源的一种抽象表示。在Linux和类Unix系统中&#xff0c;每个…
阅读更多...
苹果电脑第三方应用程序卸载工具CleanMyMacX4.14

苹果电脑第三方应用程序卸载工具CleanMyMacX4.14

CleanMyMacX&#xff0c;这是一款可以帮助你快速识别并卸载电脑上的多个应用程序的第三方工具&#xff0c;省去了逐个卸载的繁琐步骤。 我们首先要到下载CleanMyMacX&#xff0c; CleanMyMac X全新版下载如下: https://wm.makeding.com/iclk/?zoneid49983 然后&#xff0c…
阅读更多...
基于java数据结构学习网设计与实现

基于java数据结构学习网设计与实现

摘 要 随着计算机信息化时代的来临&#xff0c;教育的信息化发展也日新月异。特别是高等院校对于教育信息化的重视程度越来越高&#xff0c;教育信息化必须要投入大量的时间精力去开发一套管理系统&#xff0c;本文论述了信息化的管理手段在日常教学、考试过程中的重要性和必要…
阅读更多...
【项目 计网2】4.4网络模型 4.5协议 4.6网络通信的过程

【项目 计网2】4.4网络模型 4.5协议 4.6网络通信的过程

文章目录 4.4网络模型OSI七层参考模型TCP/IP四层模型&#xff08;常用&#xff09;简介四层介绍 4.5协议简介常见协议UDP协议TCP协议IP协议以太网帧协议&#xff08;MAC地址封装&#xff09;ARP协议&#xff08;IP->MAC&#xff09; 4.6网络通信的过程封装分用 4.4网络模型 …
阅读更多...
1新手篇：熟悉 NestJS

1新手篇：熟悉 NestJS

前言 经过了需求分析以及技术选型之后，我们正式步入了第三个环节：脚手架搭建。 工欲善其事，必先利其器，NestJS 为开发者提供了很多开箱即用的功能，我们可以根据团队的需求搭建一套适配所有业务开发的基础脚手架。因此，接下来的 2 章是基础篇的教学，我将带领大家逐步学…
阅读更多...
Stable Diffusion 硬核生存指南：WebUI 中的 GFPGAN

Stable Diffusion 硬核生存指南：WebUI 中的 GFPGAN

本篇文章聊聊 Stable Diffusion WebUI 中的核心组件&#xff0c;强壮的人脸图像面部画面修复模型 GFPGAN 相关的事情。 写在前面 本篇文章的主角是开源项目 TencentARC/GFPGAN&#xff0c;和上一篇文章《Stable Diffusion 硬核生存指南&#xff1a;WebUI 中的 CodeFormer》提…
阅读更多...
k8s存储卷

k8s存储卷

目录 一、为什么要存储卷&#xff1f;二、emptyDir存储卷三、hostPath存储卷四、 nfs共享存储卷五、PVC 和 PV5.1 PV和PVC之间的相互作用遵循的生命周期5.2 PV 的状态5.3 一个PV从创建到销毁的具体流程 六、静态创建pv和pvc资源由pod运用过程6.1 在NFS主机上创建共享目录&#…
阅读更多...
03 制作Ubuntu启动盘

03 制作Ubuntu启动盘

1 软碟通 我是用软碟通制作启动盘。安装软碟通时一定要把虚拟光驱给勾选上&#xff0c;其余两个可以看你心情。 2 镜像文件 我使用清华镜像网站找到的Ubuntu镜像文件。 Index of /ubuntu-releases/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirror 请自己选择镜像…
阅读更多...
cocosCreator 之 resources(一)

cocosCreator 之 resources(一)

版本&#xff1a; v3.4.0 参考: resources资源加载 简介 项目中所有需要通过脚本动态加载的资源可以使用resources.load接口进行加载&#xff0c;且资源相关一定要放在assets\resources的目录或子目录下。 在assets\resources目录下的资源要注意&#xff1a; 如果只是依赖于…
阅读更多...
8.1Jmeter5.1:Jmeter SSL

8.1Jmeter5.1:Jmeter SSL

Jmeter配置证书请求双向认证SSL的web接口 需求：需要通过Jmeter配置证书请求双向认证SSL的web接口 提供的证书：P12格式 备注：Jmeter需要导入的证书是keystore证书 那么要先把P12转成keystore文件 1、使用p12生成keystore文件 keytool介绍 这里需要提到提到jdk自带的key…
阅读更多...
K8S系列文章之 使用Kind部署K8S 并发布服务

K8S系列文章之 使用Kind部署K8S 并发布服务

简单介绍 kind 即 Kubernetes In Docker&#xff0c;顾名思义&#xff0c;就是将 k8s 所需要的所有组件&#xff0c;全部部署在一个docker容器中&#xff0c;是一套开箱即用的 k8s 环境搭建方案。使用 kind 搭建的集群无法在生产中使用&#xff0c;但是如果你只是想在本地简单…
阅读更多...
网络安全 Day13-Linux三剑客awk知识

网络安全 Day13-Linux三剑客awk知识

Linux三剑客awk知识 1. awk 介绍2. awk 语法3. 练习 1. awk 介绍 awk 是一门语言, 也是一个命令,Linux 有三剑客命令: grep/sed/awk三剑客的特长 grep 过滤内容sed 取行awk 取列 2. awk 语法 取列 取第一列文件($1): awk {print $1} 文件指定分隔符为文件: awk -F "指…
阅读更多...
最新文章

Copyright @ 2022~2023