前陣子在自己學(xué)習(xí)React晶框，一直想在項(xiàng)目上試試React+TypeScript結(jié)合的模式拐纱。但是手頭的一直都在使用VUE于毙，現(xiàn)在終于有新項(xiàng)目來臨，毫不猶豫的選擇用TS+React來構(gòu)建這個(gè)項(xiàng)目搬泥！
主要的依賴：
React16.12+
TypeScript3+
tslint5+
react-router5+
react-redux7+
axios0.19+
element-ui1.4+
SCSS4.13+
環(huán)境版本要求：
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 不是拼寫錯(cuò)誤 —— 它是 npm 5.2+ 附帶的 package 運(yùn)行工具。
Create React App它會(huì)自動(dòng)配置React的開發(fā)環(huán)境忿檩，my-app 是你要?jiǎng)?chuàng)建項(xiàng)目的名稱尉尾。
--scripts-version=react-scripts-ts是react官方腳手架不支持創(chuàng)建ts項(xiàng)目的時(shí)候，社區(qū)弄出來的一個(gè)解決方案燥透。
--typescript是現(xiàn)在官方腳手架支持的沙咏，可以理解成官方支持版本就對(duì)了辨图，這兩個(gè)對(duì)我們用戶來說是沒有什么能感知的區(qū)別，但一般還是建議盡量使用官方版本芭碍。
經(jīng)過一段時(shí)間的等待，React已經(jīng)成功安裝完成孽尽。
cd my-app
npm start
即可運(yùn)行預(yù)覽窖壕！
當(dāng)前的項(xiàng)目是可以運(yùn)行，但是呢杉女，對(duì)照一下我們上面的規(guī)劃瞻讽，還差一些插件。那接下就一步步給安裝上熏挎。
首先是tslint
npm i tslint
如果遇到npm一直卡住不會(huì)動(dòng)的情況速勇，可以將npm映射改為淘寶鏡像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
映射過程中如果遇到Windows_NT 10.0.14393報(bào)錯(cuò)坎拐，可能是npm被設(shè)置代理了烦磁。順序執(zhí)行一下清除代理設(shè)置:
npm config set proxy null（npm config delete proxy）
npm config set https-proxy null
npm config set strict-ssl false
映射成功后，命令行執(zhí)行
cnpm i tslint
飛快的就安裝完成了哼勇。
安裝完成后輸入
tslint -i
運(yùn)行結(jié)束之后都伪，你會(huì)發(fā)現(xiàn)項(xiàng)目根目錄下多了一個(gè) tslint.json 文件，這個(gè)就是TSLint的配置文件了积担，它會(huì)根據(jù)這個(gè)
文件對(duì)我們的代碼進(jìn)行檢查陨晶，生成的tslint.json文件有下面幾個(gè)字段：
{
? ? "defaultSeverity": "error",
? ? "extends": [
? ? ? ? "tslint:recommended"
? ? ],
? ? "jsRules": {},
? ? "rules": {},
? ? "rulesDirectory": []
}
以上就是我們初始化的時(shí)候TSLint生成的tslint.json文件初始字段，如果你發(fā)現(xiàn)你生成的文件和這里看到的不一樣帝璧。
可能是TSLint版本升級(jí)導(dǎo)致的先誉，你可以參照TSLint配置說明了解他們的用途。
defaultSeverity是提醒級(jí)別的烁，如果為error則會(huì)報(bào)錯(cuò)褐耳，如果為warning則會(huì)警告，如果設(shè)為off則關(guān)閉渴庆，那TSLint就關(guān)閉了漱病。
extends可指定繼承指定的預(yù)設(shè)配置規(guī)則。
rulesDirectory可以指定規(guī)則配置文件把曼，這里指定相對(duì)路徑杨帽。
jsRules用來配置對(duì) .js 和 .jsx 文件的校驗(yàn)，配置規(guī)則的方法和下面的rules一樣嗤军；
rules是重點(diǎn)了注盈，我們要讓TSLint根據(jù)怎樣的規(guī)則來檢查代碼，都是在這個(gè)里面配置 叙赚，我的項(xiàng)目需要配置幾個(gè)重點(diǎn)配置老客。
"no-trailing-whitespace": false,//尾部空格檢測
這個(gè)一定要選擇false僚饭，要不然每行代碼后面都不能有空格，包括換行以后產(chǎn)生的空格胧砰。
"one-line": [
? true,
? "check-open-brace",
? "check-catch",
? "check-else",
? "check-whitespace"
],//行內(nèi)檢測
這個(gè)里面可以自行配置自身需要的鳍鸵，比如check-whitespace這項(xiàng)就會(huì)要求函數(shù)名，參數(shù)表和函數(shù)段開頭的大括號(hào)之間要有空格尉间。當(dāng)然也可以設(shè)置為false偿乖，將這個(gè)功能完全禁用。
"no-console": false, //關(guān)閉不允許打印
"no-debugger": false,//關(guān)閉不允許debugger
這兩項(xiàng)都是打開后不便于調(diào)試哲嘲。
"comment-format": [
? ? ? true,
? ? ? "check-space"
],//注釋行中的空格
如果check-space這一項(xiàng)存在贪薪，那么注釋行的開頭必須要加上一個(gè)空格。這個(gè)對(duì)于使用英文注釋的人來說眠副，沒有多大影響河绽，但是中文話就沒有必要霜旧。注釋畢竟是區(qū)別于代碼段的试吁，要使用如何的書寫格式應(yīng)當(dāng)自己來決定萍倡。去掉這一項(xiàng)，或者將整個(gè)commet-format的值改為false娃弓，就可以將其禁用庞萍。
"ordered-imports": false,//關(guān)閉import名稱排序
打開的話會(huì)要求import名稱按照字母從小到大排序，對(duì)于強(qiáng)迫癥是福音忘闻。但可惜我沒有強(qiáng)迫癥钝计。。
我們暫時(shí)需要的規(guī)則已經(jīng)配置完齐佳，還有其他需要在開發(fā)過程中不斷的補(bǔ)充私恬。如果你想要查看某條規(guī)則的配置及詳情，可以參照TSLint規(guī)則說明炼吴。
下面繼續(xù)安裝
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容易出現(xiàn)卡在那里不會(huì)動(dòng)本鸣，建議使用cnpm安裝。
React首次運(yùn)行element硅蹦，常會(huì)出現(xiàn) Can't resolve 'react-hot-loader'錯(cuò)誤荣德，這種情況請(qǐng)安裝react-hot-loader最新版本
npm install react-hot-loader@next
PS：這里可能會(huì)有疑問，為什么不安裝webpack呢童芹？因?yàn)镃reate React App手腳架涮瞻，它與其他腳手架不同的一個(gè)地方就是將一些復(fù)雜工具（比如 webpack）的配置封裝了起來，讓使用者不用關(guān)心這些工具的具體配置假褪，從而降低了工具的使用難度署咽。
但是對(duì)于一些熟悉 webpack 的開發(fā)者來說，他們可能想對(duì) webpack 配置做一些修改，這個(gè)時(shí)候應(yīng)該怎么辦呢宁否？
其實(shí)可以通過 項(xiàng)目 eject的方式來修改 webpack 的配置窒升。
使用Create React App創(chuàng)建完項(xiàng)目以后，項(xiàng)目在package.json里面提供了這樣一個(gè)命令：
{
? ? ...
? ? "scripts": {
? ? "eject": "react-scripts eject"
? ? },
? ? ...
}
npm run eject執(zhí)行這條命令后會(huì)將封裝在Create React App項(xiàng)目中的配置全部反編譯到當(dāng)前項(xiàng)目慕匠，這樣用戶就可以完全取得 webpack 文件的控制權(quán)饱须，想怎么修改就怎么修改了。
# eject 后項(xiàng)目根目錄下會(huì)出現(xiàn) config 文件夾台谊，里面就包含了 webpack 配置
config
├── env.js
├── jest
│? ├── cssTransform.js
│? └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js // 開發(fā)環(huán)境配置
├── webpack.config.prod.js // 生產(chǎn)環(huán)境配置
└── webpackDevServer.config.js
Create React App與其他腳手架不同的另一個(gè)地方蓉媳，就是可以通過升級(jí)其中的react-scripts包來升級(jí) CRA 的特性。比如用老版本 Create React App創(chuàng)建了一個(gè)項(xiàng)目青伤，這個(gè)項(xiàng)目不具備 PWA 功能督怜，但只要項(xiàng)目升級(jí)了react-scripts包的版本就可以具備PWA的功能殴瘦，項(xiàng)目本身的代碼不需要做任何修改狠角。
但如果使用了eject命令，就再也享受不到 Create React App升級(jí)帶來的好處了蚪腋，因?yàn)閞eact-scripts已經(jīng)是以文件的形式存在于你的項(xiàng)目丰歌，而不是以包的形式，所以無法對(duì)其升級(jí)屉凯。
項(xiàng)目到這里基本的功能已經(jīng)具備了立帖，接下來還需要一些單獨(dú)的配以及封裝調(diào)用，放到下一篇文章里寫吧悠砚。
