携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情
React项目框架搭建(二)
别催了!!我来了~
前置项
react:react18
打包工具:webpack5
路由:react-router-dom@6.x
UI:antd4.21.7
语言:typescript
node: node14
axios
、eslint
及prettier
代码规范配置
目前所用到的库都为当前最新版本
一起学习搭建react+webpack+ts框架啊!!!(一)
接着上篇继续进行项目配置
1. css module
及sass
相关配置
1.1 css module
是什么?为什么要进行css模块化处理
1.1.1 react常见样式编写方式
内部声明样式
采用小驼峰的方式通过变量的方式写入
import React from "react";
export default class App extends React.Component {
render(): React.ReactNode {
const fontStyle: object = {
fontSize: '16px',
color: 'red'
}
return (
<div style={fontStyle}> 这里是App页面!</div>
)
}
}
实质:style方式引入
优点:不会造成样式冲突,动态样式可以通过state实现
缺点:伪类、伪元素样式无法通过内联写入,代码较为混乱且易错性较高
外联方式引入
import React from "react";
import '@styles/global.css'
export default class App extends React.Component {
render(): React.ReactNode {
return (
<div className="title"> 这里是App页面!</div>
)
}
}
// global.css
.title {
color: red;
}
使用外部样式时需要注意样式名冲突
css modules
(常用)
- 创建一个
base.module.css
文件,在对应的页面引入,ts中会报如下错:
原因:ts
遇到非ts
类型的文件会抛出异常,我们需要告诉编译器这类文件的存在
解决方式:src
下创建global.d.ts
进行类型声明
注意: 此文件生效的前提是在declare module '*.css' { const style: { [className: string]: string } export default style }
tsconfig.js
中添加如下配置项
小提示:如果加入此项配置后,报如下错误:"declaration": true, // 生成相应的.d.ts文件
还需要在tsconfig.js
中加入该属性配置"allowSyntheticDefaultImports": true // 允许对不包含默认导出的模块使用默认导出
- 运行结果如下:
css modules
实质跟vue
中的scoped
属性功能类似,主要避免样式冲突互相污染的问题
其他的样式写法这里就不在一一列举了,后面主要进行css module
及sass
相关配置~
1.1.2 sass
相关配置
创建一个test.scss
测试文件并引入
异常:没有对应的loader
解析.scss
文件
安装sass-loader
npm i sass-loader -D
webpack.config.js
进行对应配置(简写)
{
test: /\.(css|scss)$/,
// css-loader对css文件进行合并处理等
// style-loader用于处理的css文件以style标签的形式嵌入到html页面中
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
接着npm run dev
原因:scss
是css预处理器
的一种,相对css
功能更加强大,但是Css预处理器
并不能直接在浏览器上运行,需要通过解析转译为css
文件,所以就需要css后处理器PostCSS
安装postcss-loader
npm i postcss-loader -D
记得修改webpack.config.js
use: [MiniCssExtractPlugin.loader, 'css-loader','postcss-loader', 'sass-loader'],
重新运行,你会发现仍然报错!
原因:参考webpack
官网,缺少node-sass
或dart-sass
,如下图:
node-sass
:可以快速的将.scss|.sass
文件本地编译为.css
,且可以动态监听scss|sass
文件的变化,一旦改动,对应的css
也会发生变化;
安装node-sass
npm i node-sass -D
安装完后,重新运行即可
2. webpack
打包静态资源配置
webpack5
前静态资源文件的解析需要借助于file-loader
、url-loader
等依赖;webpack5
内部提供了{type: asset/resource}
用于解析图片、字体、媒体文件等
// webpack.config.js
rules: [
// 打包静态资源 webpack5之前主要用file-loader跟url-loader
{
test: /\.(png|jpg|gif|jpeg|webp|svg)$/,
type: 'asset/resource',
generator: {
filename: 'assets/images/[hash][ext][query]',
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
generator: {
filename: 'assets/fonts/[hash][ext][query]',
},
},
]
3. eslint
及Prettier
代码规范配置
3.1 eslint
相关配置
editor
编码风格配置
根目录下创建.editorconfig
,具体内容详见github
代码
- 安装
eslint
相关依赖
npm i eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D
eslint
: javascript代码检测工具,使用espree解析器;
@typescript-eslint/parser
:解析器,将typescript
解析未eslint
可以识别的EStree
;
@typescript-eslint/eslint-plugin
:一个可以打开或关闭的规则列表;
npm i eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-react-hooks -D
eslint-config-airbnb
:
eslint
配置
根目录下创建.eslintrc.js
文件
module.exports = {
env: {
jest: true,
browser: true,
node: true,
es6: true,
}, // 指定运行的环境
parser: '@typescript-eslint/parser', // 解析器
extends: ['airbnb', 'airbnb/hooks','airbnb-typescript', 'eslint:recommended'], // 扩展(继承)插件
plugins: ['@typescript-eslint', 'react', 'react-hooks'], // 插件 对react也添加规则
parserOptions: {}, // 解析器相关设置
rules: {} // 规则
}
3.2 prettier
相关配置
- 安装
prettier
相关依赖
npm i prettier eslint-config-prettier eslint-plugin-prettier -D
eslint-config-prettier
:禁用所有和prettier
产生冲突的规则;
eslint-plugin-prettier
:把prettier
应用到eslint
;
// 使用 airbnb 拓展插件规范相关库
// prettier 已内置了许多相关插件
extends: ['airbnb','airbnb/hooks','airbnb-typescript', 'plugin:@typescript-eslint/recommended', 'prettier'],
// 拓展和支持相关能力的插件库
plugins: ['react', 'react-hooks', '@typescript-eslint'],
prettier
配置
根目录下创建.prettierrc.js
文件
module.exports = {
printWidth: 100, // 超过最大值换行
tabWidth: 4, // tab缩进大小,默认为2
useTabs: false, // 使用tab缩进,默认false
semi: false, // 结尾使用分号, 默认true
singleQuote: true, // 使用单引号, 默认false
TrailingCooma: 'all', // 行尾逗号,默认none,可选 none|es5|all es5 包括es5中的数组、对象,all 包括函数对象等所有可选
bracketSpacing: true, // 对象中的空格 默认true,true: { foo: bar },false: {foo: bar}
jsxBracketSameLine: false,
arrowParens: 'avoid', // 箭头函数参数括号 默认avoid 可选 avoid| always, avoid 能省略括号的时候就省略 例如x => x,always 总是有括号
}
4. webpack
打包优化
4.1 ts-loader
向babel
进阶
-
ts-loader
与babel
的区别:
ts-loader
: 内部调用了tsc
将TypeScript
编译为JavaScript
,每次构建都会读取tsconfig.json
进行所以业务类型检查;
babel
:将TypeScript
移除,将TypeScript
全部转换为了JavaScript
,然后在进行后续一系列操作,相对ts-loader
速度更快,且它只会在当你准备好时进行类型检查,并且插件也更加丰富;注意:
Babel7
之后的包名都需要@babel
前缀 -
babel
相关安装npm i babel-loader @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-react @babel/preset-typescript -D
babel
默认只转换新的JS语法
,比如箭头函数
等,一些新的JS Api
比如Set
、Proxy
、Promise
等全局对象及全局对象上的一些方法都不会转译,所以需要为当前环境加入polyfill
babel-loader
:主要用于将js
除外的代码转换为webpack
可解析处理的模块;@babel/preset-typescript
:编译ts
文件;
@babel/preset-env
:主要用于配置当前项目支持的平台、平台版本、浏览器等,它可以根据开发者的配置按需加载,一定程度上加快编译提升转换效率;
可参考webpack官方文档npm install @babel/runtime // pro环境
-
webpack
配置相关babel
{ test: /\.(tsx?|js)$/, use: [ { loader: 'babel-loader', options: { cacheDirectory: true, // 使用默认目录缓存Loader执行结果 提升webpack打包速率 // 也可以在.babelrc中配置 presets: [ '@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript', ], plugins: ['@babel/plugin-transform-runtime'], }, }, ], include: /src/, }
到此配置结束,运行 npm run buld
打包正常 npm run dev
本地运行也正常;
这时候可以顺手把之前的ts-loader
给卸载了npm uninstall ts-loader
5. 推荐两个好用的插件
- 主题库插件 效果如下:
- 彩虹换行 效果如下:换行递进比较清晰明了,还可自定义设置喜欢的颜色~
总结:
以上就是该文章的全部内容,主要进行了css modules
、sass
、eslint
及prettier
代码规范、webpack
打包优化等配置问题;
后续还需进行axios
的二次封装以及router
、antd
、redux
的相关集成融合
终于写完了!!!