1. 介紹

在開發(fā)react應(yīng)用時(shí)，應(yīng)該沒有人用傳統(tǒng)的方法引入react的源文件(js)，然后在html編輯吧。

大家都是用webpack + es6來(lái)結(jié)合react開發(fā)前端應(yīng)用。

這個(gè)時(shí)候，我們可以手動(dòng)使用npm來(lái)安裝各種插件，來(lái)從頭到尾自己搭建環(huán)境。

比如：

npm install react react-dom --save
npm install babel babel-loader babel-core babel-preset-es2015 babel-preset-react --save
npm install babel webpack webpack-dev-server -g

雖然自己搭建的過程也是一個(gè)很好的學(xué)習(xí)過程，但是有時(shí)候難免遇到各種問題，特別是初學(xué)者，而且每次開發(fā)一個(gè)新應(yīng)用，都要自己從頭搭建，未免太繁瑣。

于是，有人根據(jù)自己的經(jīng)驗(yàn)和最佳實(shí)踐，開發(fā)了腳手架，避免開發(fā)過程中的重復(fù)造輪子和做無(wú)用功，從而節(jié)省開發(fā)時(shí)間。

類似這樣的腳手架，我掃了網(wǎng)絡(luò)上比較多人用和關(guān)注的，一共發(fā)現(xiàn)了三個(gè)，它們分別是：

1. react-boilerplate
2. react-redux-starter-kit
3. create-react-app

它們的關(guān)注量都非常大，截至寫這篇文章為止，在github上的star量是這樣的：

由此可見，使用這三個(gè)腳手架的人都相當(dāng)多，最突出的是create-react-app。

它是后來(lái)居上，他的開發(fā)時(shí)間都晚于前兩個(gè)，但關(guān)注量卻比他們還大，而且他還是facebook官方開發(fā)的。

肯定是一個(gè)優(yōu)秀的產(chǎn)品。

下面來(lái)介紹一下它的特點(diǎn)。

2. 特點(diǎn)

它有好多好多的優(yōu)點(diǎn)，先從安裝使用說起。

2.1 簡(jiǎn)單的安裝使用

create-react-app安裝起來(lái)實(shí)在是太簡(jiǎn)單，只需要一條命令，不像別的腳手架，還需要去clone整個(gè)腳手架的源碼，再在那基礎(chǔ)上改。

npm install -g create-react-app

裝完之后，生成一個(gè)新的項(xiàng)目，可以使用下面的命令：

create-react-app my-app
cd my-app/

創(chuàng)建了my-app目錄，這個(gè)時(shí)候，使用下面的命令就可以開始開發(fā)應(yīng)用了。

npm start

默認(rèn)情況下，會(huì)在開發(fā)環(huán)境下啟動(dòng)一個(gè)服務(wù)器，監(jiān)聽在3000端口，它會(huì)主動(dòng)給你打開瀏覽器的，可以立刻就看到這個(gè)app的效果。

是不是很簡(jiǎn)單？

2.2 源碼結(jié)構(gòu)簡(jiǎn)單清晰

在項(xiàng)目my-app目錄中，你會(huì)發(fā)現(xiàn)源碼非常清晰，沒有多余的文件。

真的很清爽，所有的源碼你將放到src目錄下，什么配置文件，各種亂七八糟都不用管，你只需要專注開發(fā)就好了，create-react-app都給你處理好了。

整個(gè)源碼簡(jiǎn)單，又小又清爽！管理起來(lái)也方便！

如果你使用過webpack-dev-server或webpack搭建過開發(fā)環(huán)境，你就會(huì)發(fā)現(xiàn)，create-react-app的開發(fā)環(huán)境也有類似webpack-dev-server的--inline --hot自動(dòng)刷新的功能。

什么意思呢？

就是一旦源碼文件，一更新，再保存之后，瀏覽器會(huì)自動(dòng)刷新，讓你能實(shí)時(shí)查看效果。

你總要探究一下是怎么回事，難道create-react-app也用上了webpack-dev-server?

翻看了一下源碼，沒有找到webpack.config.js文件，如果有使用webpack就應(yīng)該有這個(gè)文件，好奇怪。

看了一下node_modules目錄，也沒找到webpack相關(guān)的東西。

先源頭入手，我是用npm start命令來(lái)運(yùn)行項(xiàng)目的。

就從package.json文件入手，它的內(nèi)容是這樣的：

看到了這行：

"start": "react-scripts start"

react-scripts又是什么？

在node_modules目錄中能找到它，它果然依賴了好多工具，其中就包括'webpack'。

里面果然也有webpack的配置文件，也有好多腳本文件。

原來(lái)它是facebook開發(fā)的一個(gè)管理create-react-app服務(wù)的工具。

原來(lái)也是它讓整個(gè)源碼變得很整潔的。

因?yàn)樗[藏了沒必要的文件，大多數(shù)人的配置都是差不多的。

除此之外，它還加入了eslint的功能。讓你在開發(fā)過程中，更關(guān)注于代碼，很不錯(cuò)。

2.3線上編譯命令

這個(gè)是create-react-app的一個(gè)大亮點(diǎn)，它能讓你的應(yīng)用騙譯出在線上生產(chǎn)環(huán)境運(yùn)行的代碼，編譯出來(lái)的文件很小，且文件名還帶hash值，方便我們做cache，而且它還提供一個(gè)服務(wù)器，讓我們?cè)诒镜匾材芸吹骄€上生產(chǎn)環(huán)境類似的效果，真的超級(jí)方便。

只需一行命令：

npm run build

運(yùn)行下面兩條命令，可以查看線上生產(chǎn)環(huán)境的運(yùn)行效果。

npm install -g pushstate-server
pushstate-server build

編譯好的文件都會(huì)放到build目錄中。

2.4 api開發(fā)

在開發(fā)react應(yīng)用時(shí)，難免與服務(wù)器進(jìn)行數(shù)據(jù)交互，就是要跟api打交道。

這個(gè)時(shí)候，有一個(gè)問題。

api存在的服務(wù)器可能是跟react應(yīng)用完全分開的，而且，開發(fā)環(huán)境跟線上環(huán)境又不太一樣。

比如，開發(fā)環(huán)境中，你的react應(yīng)用是跑在3000端口的，可是api服務(wù)可能跑在3001端口，這個(gè)時(shí)候，你跟api服務(wù)器交互的時(shí)候，可能會(huì)使用fetch或各種請(qǐng)求庫(kù)，比如jquery的ajax。

這個(gè)時(shí)候可能會(huì)遇到CORS問題，畢竟端口不同，而線上環(huán)境卻沒有這個(gè)問題，因?yàn)槟愣伎刂凭€上環(huán)境的react應(yīng)用和api應(yīng)用，跑在同一個(gè)端口上。

按照以往思路，解決的方法可能是用環(huán)境變量，比如：

但是這樣搞起來(lái)，還是有些復(fù)雜，然而，create-react-app提供了一個(gè)超級(jí)簡(jiǎn)單的方法，只需要在package.json文件中，加一個(gè)配置項(xiàng)就可以了。

比如：

"proxy": http://localhost:3001/,

至于你用的是http的何種請(qǐng)求庫(kù)，都是一樣的，不用改任何代碼。這個(gè)選項(xiàng)，只對(duì)開發(fā)環(huán)境有效，線上環(huán)境還是保持react應(yīng)用和api應(yīng)用同一個(gè)端口。

有以上這么多的優(yōu)點(diǎn)，你還有理由不用嗎？

完結(jié)。以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論