# dk-react-cli

**Repository Path**: dk-wuwei/dk-react-cli

## Basic Information

- **Project Name**: dk-react-cli
- **Description**: 使用Webpack搭建的React+TS脚手架 内置antd
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-21
- **Last Updated**: 2022-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<h1 align="center">Welcome to dk-react-cli 👋</h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-1.0.0-blue.svg?cacheSeconds=2592000" />
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

> 使用Webpack搭建的ReactTS脚手架

* 使用`Webpack`搭建的`React`脚手架
* 内置`TS` + `Mobx` + `antd` + `lodash`

* 使用`yarn`包管理工具 为了更快速下载 可以安装tyarn npm i -g tyarn 本项目使用tyarn

## Install

```sh
pnpm i
```

## Usage

```sh
npm run start
```

## 目录结构

```sh
├── .husky                  Git hooks 工具
│   ├── commit-msg              Git 提交时触发的钩子 在这里做commit规范校验
│   └── pre-commit              Git 提交前触发的钩子 在这里做eslint校验修复
├── .vscode                 vscode配置
│   └── settings.json           开启保存时触发eslint、stylelint修复功能
├── config                  项目打包配置
│   ├── antd-theme.js           自定义的antd主题配色
│   ├── constant.js             一些常量如：devServe.proxy文件位置、项目title...
│   ├── env.js                  环境变量
│   └── webpack.config.js       webpack 配置文件
├── public                  静态资源
│   └── index.html              模板html
├── src                     项目源代码
│   ├── assets                  图片等资源文件
│   ├── components              公共组件
│   ├── hooks                   自定义hook
│   ├── layouts                 整体布局容器
│   ├── pages                   业务代码
│   ├── router                  路由配置
│   ├── service                  api请求
│   ├── store                   redux
│   ├── utils                   工具函数
│   ├── App.tsx                 App组件
│   ├── index.tsx               项目入口
│   └── setup-proxy.js          devServe.proxy配置
├── typings                 ts类型声明
│   └── shims.d.ts              一些自定义的类型声明
├── .babelrc                babel运行时配置
├── .browserslistrc         配置 polyfill 需要兼容到的目标
├── .commitlintrc.js        commitlint运行时配置
├── .eslintignore           eslint忽略的检查项
├── .eslintrc.js            eslint运行时配置
├── .prettierrc.js          prettier运行时配置
├── .stylelintrc.js         stylelint运行时配置
├── README.md               项目介绍
├── package.json            配置和描述如何与程序交互和运行的中心 https://blog.csdn.net/wy122222222/article/details/109056416
├── pnpm-lock.yaml          项目使用pnpm包管理工具 pnpm锁定了下载的包的版本
├── postcss.config.js       postcss运行时配置
└── tsconfig.json           ts配置
```

## 介绍一下用到的库

### Webpack 相关

* webpack
* webpack-cli
* webpack-dev-server

#### loader

* style-loader          在DOM里插入一个`<style>`标签，并且将css写入这个标签内
* css-loader            会对@import和url() 进行处理
* postcss-loader        会对css做处理如：加上厂商前缀
* less-loader less      解析less文件
* sass-loader sass      解析s[ac]cc文件
* babel-loader @babel/core @babel/preset-react @babel/preset-typescript @babel/preset-env @babel/plugin-transform-runtime 

> babel-loader @babel/core @babel/preset-react @babel/preset-typescript 解析tsx?文件 
> 
> @babel/preset-env 对源代码做polyfill 
> 
> @babel/plugin-transform-runtime 在打包构建时避免重复引入辅助代码


#### plugin

在plugins中使用
* html-webpack-plugin                   生成html文件、自动引入css、js
* eslint-webpack-plugin                 eslint校验修复
* stylelint-webpack-plugin              stylelint校验修复(因为webstorm不能保存时有有效的格式化)
* copy-webpack-plugin                   把一些不需要打包的文件直接copy到指定的目录
* fork-ts-checker-webpack-plugin        ts检查
* mini-css-extract-plugin               抽离css文件 在production环境时使用MiniCssExtractPlugin.loader替换style-loader
* webpackbar                            打包显示进度条
* @pmmmwh/react-refresh-webpack-plugin  模块化热更新react
* antd-dayjs-webpack-plugin             antd中使用dayjs替换Moment

在optimization.minimizer中使用
* css-minimizer-webpack-plugin          压缩css
* terser-webpack-plugin                 压缩js

#### 其他配置 详见config/webpack.config.js 中

##### babel配置

**.babelrc**

```ts
{
  "presets": [
    [
      "@babel/preset-env", // polyfill 具体配置依赖于 .browserslistrc 文件的配置
      { // 按需加载core-js的polyfill
        "useBuiltIns": "usage", // 
        "corejs": { // corejs 是专门用来做 ES6 以及以上 API 的 polyfill。
          "version": "3",
          "proposals": true
        }
      }
    ],
    "@babel/preset-react", // 转换react
    "@babel/preset-typescript" // 转换typescript
  ],
  "plugins": [
    "@babel/plugin-transform-runtime"  // 在打包构建时避免重复引入辅助代码
  ]
}
```

**.browserslistrc**

```ts
[production staging] // 生产环境需要polyfill到的目标
> 1%
ie 10

[development] // 开发环境需要polyfill到的目标
last 1 chrome version
last 1 firefox version
last 1 safari version
```

##### postcss配置

* 除`postcss-loader`还需要安装`postcss-preset-env` 

```ts
{
  plugins: [
    [
      'postcss-preset-env', // 做 polyfill
      {
        autoprefixer: { // 给不同浏览器加前缀
          grid: true,
        },
      },
    ],
  ],
}
```

**项目具体配置 详见postcss.config.js**

### prettier配置

**prettier代码格式化工具**
> vscode需要安装Prettier - Code formatter插件 webStorm内置

**用来格式化的 项目具体配置 详见 .prettierrc**

[Prettier更多配置](https://prettier.io/docs/en/options.html)

### eslint配置

**eslint 解决 代码质量问题 代码风格问题（prettier会替代）**
> vscode需要安装eslint插件 webStorm内置

* 安转`eslint` 后执行`npx eslint --init`按照提示安装适用于 react ts 的配置 可以选用 airbnb（Angular）的配置。完成后下载如下的几个包：

> `eslint-config-airbnb` `eslint-plugin-react` `eslint-plugin-react-hooks` `eslint-plugin-jsx-a11y` `@typescript-eslint/parser` `@typescript-eslint/eslint-plugin`


**注意：**

`eslint-config-airbnb-typescript` 需要手动下载安装一下 并在.eslintrc的extends中配置使用

**项目具体配置 详见.eslintrc**

### stylelint配置

**css|less|s[ac]ss 代码风格格式化**
> vscode需要安装stylelint插件 webStorm内置

安装`stylelint` `stylelint-config-standard` `stylelint-config-css-modules` `stylelint-order` `postcss-scss`

```ts
module.exports = {
  extends: [
    "stylelint-config-standard", // stylelint的推荐配置
    "stylelint-config-css-modules" // 处理css-modules
  ],
  plugins: ['stylelint-order'], // CSS属性排序插件
  customSyntax: "postcss-scss", // 处理scss文件
}
```

**项目具体配置 详见.stylelintrc.js**

### commitlint配置

安装 `commitlint` `@commitlint/config-conventional`，在extends中使用`@commitlint/config-conventional`即可

```ts
module.exports = {
  extends: ['@commitlint/config-conventional'], // 强制执行常规提交的可共享commitlint配置。
  rules: { },// 定义规则类型
}
```

**项目具体配置 详见 .commitlintrc.js**

### ts配置

安装`typescript`和`typescript-plugin-css-modules`

> typescript-plugin-css-modules 处理css模块化

**项目具体配置 详见 tsconfig.json**

## Author

👤 **dk**

## Show your support

Give a ⭐️ if this project helped you!

***