从零开始搭建React+TypeScript项目

旧城等待， 2022-11-05 06:24 336阅读 0赞

主要的依赖：

React16.12+

TypeScript3+

tslint5+

react-router5+

react-redux7+

axios0.19+

element-ui1.4+

SCSS4.13+

--------------------

环境版本要求：

Node >= 8.10

npm >= 5.6

--------------------

首先安装 React 框架和类型库，有两种方式：

方法1：

> npx create-react-app my-app --typescript

方法2：

> npx create-react-app my-app --scripts-version=react-scripts-ts

*注意：npx 不是拼写错误 —— 它是 npm 5.2+ 附带的 package 运行工具。*

Create React App它会自动配置React的开发环境，my-app 是你要创建项目的名称。

\--scripts-version=react-scripts-ts是react官方脚手架不支持创建ts项目的时候，社区弄出来的一个解决方案。

\--typescript是现在官方脚手架支持的，可以理解成官方支持版本就对了，这两个对我们用户来说是没有什么能感知的区别，但一般还是建议尽量使用官方版本。

经过一段时间的等待，React已经成功安装完成。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70][]

> cd my-app
> 
> npm start

即可运行预览！

当前的项目是可以运行，但是呢，对照一下我们上面的规划，还差一些插件。那接下就一步步给安装上。

首先是tslint

> npm i tslint

如果遇到npm一直卡住不会动的情况，可以将npm映射改为淘宝镜像。

> npm install -g cnpm --registry=https://registry.npm.taobao.org

*映射过程中如果遇到Windows\_NT 10.0.14393报错，可能是npm被设置代理了。顺序执行一下清除代理设置:*

> npm config set proxy null（npm config delete proxy）
> 
> npm config set https-proxy null
> 
> npm config set strict-ssl false

映射成功后，命令行执行

> cnpm i tslint

飞快的就安装完成了。

安装完成后输入

> tslint -i

运行结束之后，你会发现项目根目录下多了一个 tslint.json 文件，这个就是TSLint的配置文件了，它会根据这个

文件对我们的代码进行检查，生成的tslint.json文件有下面几个字段：

> \{
> 
>     "defaultSeverity": "error",
> 
>     "extends": \[
> 
>         "tslint:recommended"
> 
>     \],
> 
>     "jsRules": \{\},
> 
>     "rules": \{\},
> 
>     "rulesDirectory": \[\]
> 
> \}

以上就是我们初始化的时候TSLint生成的tslint.json文件初始字段，如果你发现你生成的文件和这里看到的不一样。

可能是TSLint版本升级导致的，你可以参照TSLint配置说明了解他们的用途。

defaultSeverity是提醒级别，如果为error则会报错，如果为warning则会警告，如果设为off则关闭，那TSLint就关闭了。

extends可指定继承指定的预设配置规则。

rulesDirectory可以指定规则配置文件，这里指定相对路径。

jsRules用来配置对 .js 和 .jsx 文件的校验，配置规则的方法和下面的rules一样；

rules是重点了，我们要让TSLint根据怎样的规则来检查代码，都是在这个里面配置 ，我的项目需要配置几个重点配置。

> "no-trailing-whitespace": false,//尾部空格检测

这个一定要选择false，要不然每行代码后面都不能有空格，包括换行以后产生的空格。

> "one-line": \[
> 
>   true,
> 
>   "check-open-brace",
> 
>   "check-catch",
> 
>   "check-else",
> 
>   "check-whitespace"
> 
> \],//行内检测

这个里面可以自行配置自身需要的，比如check-whitespace这项就会要求函数名，参数表和函数段开头的大括号之间要有空格。当然也可以设置为false，将这个功能完全禁用。

> "no-console": false, //关闭不允许打印
> 
> "no-debugger": false,//关闭不允许debugger

这两项都是打开后不便于调试。

> "comment-format": \[
> 
>       true,
> 
>       "check-space"
> 
> \],//注释行中的空格

如果check-space这一项存在，那么注释行的开头必须要加上一个空格。这个对于使用英文注释的人来说，没有多大影响，但是中文话就没有必要。注释毕竟是区别于代码段的，要使用如何的书写格式应当自己来决定。去掉这一项，或者将整个commet-format的值改为false，就可以将其禁用。

> "ordered-imports": false,//关闭import名称排序

打开的话会要求import名称按照字母从小到大排序，对于强迫症是福音。但可惜我没有强迫症。。

我们暂时需要的规则已经配置完，还有其他需要在开发过程中不断的补充。如果你想要查看某条规则的配置及详情，可以参照TSLint规则说明。

下面继续安装

axios：

> npm i axios

redux：

> npm i redux
> 
> npm i redux-devtools

SCSS：

> npm i sass-loader node-sass --save-dev

element：

> npm i element-react
> 
> npm i element-theme-default

使用npm安装element-react容易出现卡在那里不会动，建议使用cnpm安装。

*React首次运行element，常会出现 Can't resolve 'react-hot-loader'错误，这种情况请安装react-hot-loader最新版本*

> npm install react-hot-loader@next

PS：这里可能会有疑问，为什么不安装webpack呢？因为Create React App手脚架，它与其他脚手架不同的一个地方就是将一些复杂工具（比如 webpack）的配置封装了起来，让使用者不用关心这些工具的具体配置，从而降低了工具的使用难度。

但是对于一些熟悉 webpack 的开发者来说，他们可能想对 webpack 配置做一些修改，这个时候应该怎么办呢？

其实可以通过 项目 eject的方式来修改 webpack 的配置。

使用Create React App创建完项目以后，项目在package.json里面提供了这样一个命令：

> \{
> 
>     ...
> 
>     "scripts": \{
> 
>     "eject": "react-scripts eject"
> 
>     \},
> 
>     ...
> 
> \}

npm run eject执行这条命令后会将封装在Create React App项目中的配置全部反编译到当前项目，这样用户就可以完全取得 webpack 文件的控制权，想怎么修改就怎么修改了。

\# eject 后项目根目录下会出现 config 文件夹，里面就包含了 webpack 配置

> config
> 
> ├── env.js
> 
> ├── jest
> 
> │  ├── cssTransform.js
> 
> │  └── fileTransform.js
> 
> ├── paths.js
> 
> ├── polyfills.js
> 
> ├── webpack.config.dev.js // 开发环境配置
> 
> ├── webpack.config.prod.js // 生产环境配置
> 
> └── webpackDevServer.config.js

Create React App与其他脚手架不同的另一个地方，就是可以通过升级其中的react-scripts包来升级 CRA 的特性。比如用老版本 Create React App创建了一个项目，这个项目不具备 PWA 功能，但只要项目升级了react-scripts包的版本就可以具备PWA的功能，项目本身的代码不需要做任何修改。

但如果使用了eject命令，就再也享受不到 Create React App升级带来的好处了，因为react-scripts已经是以文件的形式存在于你的项目，而不是以包的形式，所以无法对其升级。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1hsNDI3Nw_size_16_color_FFFFFF_t_70]: /images/20221023/4b20f0c2cc6747efa0c1cdbd614f75fb.png