https://github.com/js-banana/webpack-react-ts

a webpack5.x + Typescript + React + Antd + Less + Eslint + Prettier + Precommit template
https://github.com/js-banana/webpack-react-ts

antd eslint gitcommit hooks prettier react typescript webpack5

Last synced: 8 months ago
JSON representation

a webpack5.x + Typescript + React + Antd + Less + Eslint + Prettier + Precommit template

• Host: GitHub
• URL: https://github.com/js-banana/webpack-react-ts
• Owner: JS-banana
• License: mit
• Created: 2021-08-08T16:14:07.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2021-09-09T14:45:32.000Z (over 4 years ago)
• Last Synced: 2025-03-25T20:04:47.213Z (12 months ago)
• Topics: antd, eslint, gitcommit, hooks, prettier, react, typescript, webpack5
• Language: JavaScript
• Homepage: https://js-banana.github.io/webpack-react-ts/
• Size: 2.11 MB
• Stars: 10
• Watchers: 2
• Forks: 5
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: License

Awesome Lists containing this project

README

          
# webpack-react-ts

## 开发

- **使用 Gitpod 体验在线开发环境**

[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/JS-banana/webpack-react-ts/)

- **克隆到本地**

```sh

# clone

git clone https://github.com/JS-banana/webpack-react-ts

# install

yarn install

# dev serve

yarn dev

```

## 特性

- 支持`Typescript`

- 支持`React`、`JSX`语法

- 支持`ES6`语法

- 支持`Less module`

- 支持`Eslint`、`Prettier`、`Pre-commit hook`

- 支持`HMR`快速热更新

- 支持`Antd`按需引入与主题样式覆盖

- 支持`Proxy`代理、`alias`别名

## 目录结构

```js

├── .husky                              // git hook 配置文件

├── dist                                // 默认的 build 输出目录

├── config                              // 全局配置文件

├── public                              // 静态文件

├── test                                // 测试文件

└── src                                 // 源码目录

    ├── assets                          // 公共的文件（如image、css、font等）

    ├── components                      // 项目组件

    ├── constants                       // 常量/接口地址等

    ├── layout                          // 全局布局

    ├── routes                          // 路由

    ├── store                           // 状态管理器

    ├── utils                           // 工具库

    ├── pages                           // 页面模块

        ├── Home                        // Home模块，建议组件统一大写开头

        ├── ...

    ├── App.tsx                         // react顶层文件

    ├── index.ts                        // 项目入口文件

    ├── typing.d.ts                     // ts类型文件

├── .editorconfig                       // IDE格式规范

├── .env                                // 环境变量

├── .eslintignore                       // eslint忽略

├── .eslintrc                           // eslint配置文件

├── .gitignore                          // git忽略

├── .npmrc                              // npm配置文件

├── .prettierignore                     // prettierc忽略

├── .prettierrc                         // prettierc配置文件

├── .stylelintrc                        // stylelint配置文件

├── .babel.config.js                    // babel配置文件

├── commitlint.config.js                // git commit lint 配置文件

├── LICENSE.md                          // LICENSE

├── package.json                        // package

├── postcss.config.js                   // postcss

├── README.md                           // README

├── setupEnzyme.ts                      // enzyme 测试配置文件

├── tsconfig.eslint.json                // eslint拓展typescript配置文件

└── tsconfig.json                       // tsconfig

```

## 更新

- 2021-08-19：lint 配置调整优化

- 2021-08-26：热更新调整、bug fix

  - 热更新插件 react-hot-loader 改用 react-refresh

  - history 实例由 react-router-dom/useHistory 改用 history/createBrowserHistory，解决 history 为 undefined 问题