介绍

ts-react-template是一个React项目生成模板。用于生成一个React + Typescript + React Router(可选) + Redux(可选)的项目。

快速开始

yarn create esboot ts-react my-app
cd my-app
yarn start

创建项目

# 推荐使用yarn
yarn create esboot ts-react
# npm >= 6
npm init esboot ts-react
# npm < 6
npx create-esboot ts-react

如果没有指定目录，会询问是否在当前目录创建项目。

• Create project under current directory?

根据提示选择，如果选择 否 则会中止创建。

• Use react router? 是否需要React Router
• Use redux? 是否需要Redux

如果没有错误，则会提示模板已经创建完毕(Success! All files created!)。

• Install all dependence right now? 是否需要立即安装依赖

关于Husky

在依赖安装完毕之后会自动安装husky，但是因为husky依赖git的钩子，所以如果当前项目不是git项目，会有如下提示：

$ husky install
fatal: not a git repository (or any of the parent directories): .git

这时，husky的钩子也处于不可用状态。如果要启用husky，可依次执行以下命令：

git init
yarn prepare

这时候可以测试husky是否生效。

git add .
git commit -m "test"

husky会先触发pre-commit钩子，检测eslint和stylelint。 然后触发commit-msg钩子，进行 提交信息 检测。上面的test信息会提示格式不正确，具体的提交格式可以看.commitlintrc.js。

目录结构

my-app|-- .babelrc.js|-- .browserslistrc # 浏览器兼容列表|-- .editorconfig # 编辑器配置|-- .eslintignore|-- .eslintrc.js|-- .gitignore|-- .prettierrc|-- .stylelintrc|-- CHANGELOG.md|-- README.md|-- config.js # 项目配置文件|-- esboot.config.js # esboot配置文件|-- globals.d.ts|-- package.json|-- tsconfig.json|-- webpack.config.js|-- dev # 开发环境脚本相关| |-- upgrade-version.js| |-- zip.js|-- src| |-- app.tsx| |-- index.tsx| |-- components| | |-- demo.scss| | |-- demo.tsx| |-- global-css| | |-- main.scss| |-- images| | |-- checked@2x.png| | |-- en.png| |-- model # Redux相关| |-- action.ts| |-- reducer.ts| |-- store.ts|-- template| |-- index.html

esboot.config.js说明

module.exports={serverPort: 23564,// 开发服务器端口copyFile: [// 打包时需要copy的文件'./config.js',],html: [// 打包入门{name: 'Page1',title: 'Page1',entry: './src/Page1',},{name: 'Page2',title: 'Page2',entry: './src/Page2',},// ...],};

Scripts

• start / dev

启动开发服务器

• build:clear

打生产包

• build

1. 打生产包
2. 自动更新测试版本号
3. 压缩文件 到 release/vx.x.x.x.zip
4. 为输出目录打开一个静态服务器

• preview

为生产输出目录打开一个静态服务器

• analyzer

分析生产输出目录文件大小

• zip

压缩生产输出目录

• eslint

开始js文件格式检测

• stylelint

开始样式文件格式检测

• lint-staged

对staged中的文件执行eslint和stylelint。

• commitlint

检测commit信息（一般不用手动执行）

• prepare

prepare钩子，自动配置husky