携手创作，共同成长！这是我参与「掘金日新计划 · 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: {} // 规则
}

eslint参考文档

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的相关集成融合

终于写完了！！！

一起学习搭建react+webpack+ts框架啊！！！(二)

React项目框架搭建(二)

前置项

1. css module及sass相关配置

1.1 css module是什么？为什么要进行css模块化处理

1.1.1 react常见样式编写方式

内部声明样式

外联方式引入

css modules(常用)

1.1.2 sass相关配置

2. webpack打包静态资源配置

3. eslint及Prettier代码规范配置

3.1 eslint相关配置

3.2 prettier相关配置

4. webpack打包优化

4.1 ts-loader向babel进阶