从零开始搭建React+TypeScript项目

主要的依赖:

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已经成功安装完成。

从零开始搭建React+TypeScript项目_第1张图片

 

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已经是以文件的形式存在于你的项目,而不是以包的形式,所以无法对其升级。

 

 

你可能感兴趣的:(React,react)