# react-ts-blog

**Repository Path**: xuyife/react-ts-blog

## Basic Information

- **Project Name**: react-ts-blog
- **Description**: 通过react和typeScript搭建自己的博客，用于存放常遇见的一些问题
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-10-09
- **Last Updated**: 2022-04-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### <a href="http://xuyife.gitee.io/react-ts-blog/" target="_blank">博客链接</a>

---

### 1. 安装依赖

```js
  yarn add webpack webpack-cli -D //配置webpack基本环境
```

### 2.配置 babel 的安装依赖

```js
yarn  add babel-loader @babel/core @babel/cli @babel/preset-env -D
yarn  add core-js regenerator-runtime -S
```

简单说明一下：

> - babel 提供的命令行工具@babel/cli，主要是提供 babel 这个命令,Babel 的核心功能包含在 @babel/core 模块中
> - @babel/preset-env 主要作用是对我们所使用的并且目标浏览器中缺失的功能进行代码转换和加载 polyfill。在不进行任何配置的情况下，它所包含的插件将支持所有最新的 JS 特性(ES2015,ES2016 等，不包含 stage 阶段)，将其转换成 ES5 代码
> - core-js 和 regenerator-runtime 可以模拟完整的 ES2015+环境。这意味着可以使用诸如 Promise 和 Map 之类的新的内置组件、Array.from 之类的静态方法、Array.prototype.includes 之类的实例方法）
> - @babel/preset-env 提供了一个 useBuiltIns 参数，设置值为 usage 时，就只会包含代码需要的 polyfill。有一点需要注意：配置此参数的值为 usage，必须要同时设置 corejs。

创建 babel.config.js,还要修改 webpack 配置

```js
module.exports = {
  presets: [
    [
      "@babel/env",
      {
        useBuiltIns: "usage",
        corejs: 3,
      },
    ],
  ],
};
```

### 3.配置预处理器

```js
yarn add sass-loader dart-sass css-loader style-loader file-loader -D
```

### 4.配置 HtmlWebpackPlugin

```js
yarn add html-webpack-plugin -D
```

### 5.配置 devServer 热更新功能

```js
yarn add webpack-dev-server -D
```

### 6.配置 react 和 typescript

修改 babel.config.js 创建 tsconfig.json 可以直接用当前模板

```js
yarn add react react-dom react-router-dom -S
yarn add @babel/preset-react @types/react @types/react-dom @types/react-router-dom typescript @babel/preset-typescript -D
```

### 7. 压缩 css mini-css-extract-plugin

具体修改查看 webpack.config.js

```js
yarn add mini-css-extract-plugin -D
```

### 8. 压缩 css mini-css-extract-plugin

具体修改查看 webpack.config.js

```js
yarn add mini-css-extract-plugin -D
```

### 9. cross-env 添加全局变量

```js
yarn add cross-env -D
```

### 10. typescript 配置 alias

```js
yarn add babel-plugin-module-resolver -D
```

需要修改的地方
tsconfig.json 和 webpack.config.js

```js
"baseUrl": "./",
"paths": {
    "@components/*": [
        "./src/components/*"
    ],
}


alias: {
      "@components": path.join(__dirname, "./src/components"),
},
```

### 10. 实现组件的按需加载

> - 通过 lazy() api 来动态 import 需要懒加载的组件
> - import 的组件目前只支持 export default 的形式导出
> - Suspense 来包裹懒加载的组件进行加载，可以设置 fallback 现实加载中效果

具体修改查看 router 下面的 config.js 和 index.js

### 11. 打包删除 dist 目录

```js
yarn add clean-webpack-plugin -D
classnames //可以定义多个类名 @types/classnames
```

### 12. 解析.md 文件 和语法高亮

```js
yarn add  markdown-it -S
yarn add  copy-webpack-plugin -D // 访问public下面的文件
```

### 13. 引入 antd

```js
yarn add  antd -S
yarn add  babel-plugin-import -D
```

配置按需加载 修改 babel.config.js

### 14. 将 css 和 js 打包到文件夹内部

```js
webpack.config.js   filename: "static/[name].[chunkhash:8].js",
new MiniCssExtractPlugin({
  filename: "./static/css/[name]index.css",
})
```

### 14. 配置热更新

> - 清空控制台不必要的输出 clientLogLevel: "error",

### 15. 配置 svg

```js
yarn add  svg-sprite-loader svgo-loader -D
```

修改 webpack.config.js

[常见 typeScript 问题](https://my.oschina.net/u/3347851/blog/4547590)
[常见 typeScript 问题](https://cloud.tencent.com/developer/article/1593335)