react.js 之 create-react-app 命令行工具系統講解
阿新 • • 發佈：2017-09-11
全局變量 document 是什麽 模板 有一種 cut process 函數定義 pan
react.js 教程之 create-react-app 命令行工具系統講解
-
快速開始
npm install -g create-react-app create-react-app my-app cd my-app/ npm start 通過http://localhost:3000/查看你的app 使用 npm run build 編譯打包程序 npm test 文件修改後測試，這部分內容後面講 -
更新到最新版本
創建react app的主要分為兩個包，一個包是create-react-app命令行，一個包是react-scripts，這個是用來生成具體項目的第三方依賴，如果要更新的話，基本上不需要更新create-react-app包，它就是使用最新版本的react-scripts包創建項目的，所以你創建的項目能夠獲取最新的特性和改進而不需要更新create-react-app包，而只用更新react-scripts包，而要更新這個包，可以打開https://github.com/facebookincubator/create-react-app/blob/master/CHANGELOG.md找到你當前的react-scripts版本，然後通過給定的命令一步步更新，這樣可能會很麻煩，但是你也可以直接修改package.json中的版本號，然後直接npm install安裝，但是這樣可能導致潛在的破壞變化，我們盡量保證這個破話最小化 -
文件結構
註意如下幾點： 1.項目目錄下面的public和src目錄下的index文件必須存在不能改名，其他的文件可以刪除和改名，你可能在src目錄下面創建子目錄，react為了達到最快速的代碼重建，只有在src根目錄下的文件會被webpack編譯，所以必須把文件放在src根目錄下面，否則webpack不會識別 2.只用public目錄下的文件才會被public/index.html引用，請閱讀下面的說明，從而使用js和html靜態資源 3.你能夠創建更多的和public同級的頂級目錄，他們不會包含在項目構建中，你可以使用他們作為項目文檔 -
可用的腳本命令
1.npm start 在http://localhost:3000下監視文件，文件修改將自動更新，你可以在控制臺中看到檢測錯誤 2.npm test 在交互監視模式下啟動測試運行程序。後面細講 3.npm run build 在生產環境中編譯代碼，並放在build目錄中 能夠正確的打包代碼，並且優化，壓縮，使用hash重命名文件 4.npm run eject 註意：這是一個單向操作，一旦你使用eject，那麽就不能恢復了 使用說明：如果你對create-react-app這個構建工具和配置項不滿意，你可以在任何時候eject，從而導出可配置的模板，這個命令可以移除到項目的單一構建依賴，取而代之的是將配置文件和項目依賴到導入到你的項目中，你可以隨意支配他們，之後除了eject命令以外其余的命令都是可用的，這些命令也是可配置的，所以這時候你就可以操作他們了，不得不說這個逼裝的可以，不就是變成vue-cli類似了嗎，關於react的配置文件，容我日後再總結出來 你不是非要使用這個功能，原來的模板指定的功能在中小項目中有很好的表現，你沒有必須使用npm run eject的義務，但是作為牛逼的我們意識到如果這個構建工具不能自定義那麽鳥用都沒有 -
支持最新的js語法和墊層
這個項目除了支持es6的特性外還支持其他的語法如es7,es8,jsx等 註意：這個react項目只支持Object.assign()（使用object-assign插件） Promise（使用promise插件） fetch（使用whatwg-fetch插件） 的墊層，如果要使用其他的es6特性需要手動添加合適的墊層，自己到npm中找吧，說實話這點和vue-cli比起來就遜色了 -
編輯器中的語法高亮
如果你使用vsCode自動支持es6語法高亮 -
在編輯器中展示檢測輸出
就是在編輯器中使用eslint，下載編輯器的ESlint插件，然後在項目中添加.eslintrc文件，這個東西用起來很不爽有種約束感，不推薦使用，感覺react的這套腳手架做的一般 -
在vsCode中調試代碼
這個功能可謂是vsCode的神作，對於調試前端框架中的代碼非常給力，強烈推薦使用 點擊你的vsCode上面的調試按鈕中的添加配置，把裏面的配置項刪除，然後添加如下代碼 { "version": "0.2.0", "configurations": [{ "name": "Chrome", "type": "chrome", "request": "launch", "url": "http://localhost:3000", "webRoot": "${workspaceRoot}/src", "userDataDir": "${workspaceRoot}/.vscode/chrome", "sourceMapPathOverrides": { "webpack:///src/*": "${webRoot}/*" } }] } 重啟你的編輯器，然後按F5就可以在編輯器中調試了 - 自動格式化代碼（略）
- 根據頁面的內容動態的更改html頁面的title
- 可以直接使用document.title即可，官網還介紹了其他幾種做法，可以自行查閱
-
安裝第三方依賴
例如react-router npm install --save react-router -
導入組件
使用import導入和export導出，推薦在組件中使用export default導出組件，只能出現一次該語法 -
代碼分割
此即按需加載，要實現這個功能就是使用import函數，註意這和導入組件的import是有差別的，下面直接上demo 假設模塊A中寫如下代碼 const moduleA = ‘hello‘; export { moduleA }; 在app.js中按需導入模塊A import(‘./moduleA‘).then( ({moduleA}) => { // 在這裏面可以使用模塊A } ).catch( err => { // ... } ) -
導入css文件
也是借助webpack的導入css文件的功能，在js文件中導入css文件表明依賴關系 但是請註意，react在這裏裝了一個逼，我們不需要這個功能，盡管我們支持這個，但是作為react開發工程師，我強烈建議你看完下面的內容 以下是webpack導入css的缺點： 1.如果你使用webpack在js中導入代碼了，那麽你的項目很難移植到其他構建工具和開發環境中 2.在開發環境中，如果你修改了你的組件，那麽會導致你的css文件沒必要的重載 3.在生產環境中，所有的css文件都會被打包到一個單獨的壓縮後的css文件中，這樣看來有幾把用？ 所以react建議你把css文件都放到src目錄下的index.js文件中，這樣一來如果要更換構建工具直接把index.js中的import拿掉就可以了 -
css文件後處理
這部分內容是來對css文件壓縮和自動添加css兼容性前綴的，其實使用的就是webpack的postcss-loader，這個loader，react的腳手架已經配置好了，vue-cli也用了這個 -
css文件的預處理
react配置的sass預處理器，如果你必須要用sass，關於這部分配置可以去查看官網，我個人覺得沒有必要使用sass，使用框架開發，有很多配套的ui框架，而你只需要簡單的調整一下布局就可以了，在這一節你要知道，react腳手架並沒有對sass做配置，需要你手動配置 -
添加圖片，字體和文件
添加這類的靜態資源和添加css文件類似 你使用import導入一個圖片或者一個文件比如PDF，返回的是會是一個路徑，這和css的import是不同的，返回的這個路徑值可以當做src或者href的屬性值，為了減少http請求，react腳手架對不超過10000字節的圖片做了data URI處理，SVG格式的圖片不支持這項設置，下面是demo import logo from ‘./logo.png‘; logo就是絕對路徑，所以當你的項目中需要使用圖片等類似靜態資源的時候，必須這樣顯示的import不然打包編譯後的路徑就不是你想要的。 註意點：在css文件中導入圖片等靜態資源，使用相對路徑，webpack在編譯的時候會自動的替換成絕對路徑。 你要知道react在這裏又裝了一個逼，用他自己的方式處理靜態資源，請看下一節 -
使用public目錄
1.修改html 這個html是可以修改的，編譯完成的js文件是自動插入到這個文件中的，其實就是用的webpack的html插件，切。。。 2.添加其他的靜態資源 你可以把不需要webpack編譯的文件放在public文件夾裏面，這裏面的文件都不會被編譯，但是react又說，最好不要這樣放靜態資源，怎麽樣怎麽樣不好，但是如果你執意要自己導入文件，不需要webpack編譯，可以看下面的介紹 放在public目錄下面的文件只是簡單的復制到build目錄中，那麽想要正確的引入這個文件需要使用PUBLIC_URL這個變量，如下代碼 <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 也就是說你寫路徑的時候 "%PUBLIC_URL%" + "/img/logo.png" 這種格式就ok了 註意點：這個變量只能在上述的情況下使用，如果你想導入src目錄或者node_modules目錄中的文件，你要把他復制過來，在編譯的時候上面的變量會替換成絕對路徑，如果你在js中導入可以如 return <img src={process.env.PUBLIC_URL + ‘/img/logo.png‘} /> 反正註意一點這樣做是非常不合理的，這裏只是應急方案 3.什麽時候應該使用public文件夾？ 以下幾種情況： 1.你需要一些文件有特殊的文件名 2.當你有很多圖片，並且這些圖片的路徑是動態添加的，懂不？？就比如你在頁面上展示一個圖片，這個圖片要一直變，使用webpack編譯後的文件不能做到這點，思考一下 3.如果你使用其他的很小的js庫，並且這個庫已經壓縮和優化了，你可以直接用 4.還有一些js庫和webpack是有沖突的，你必需通過script標簽的形式導入 註意：如果你通過script導入的js是有全局變量的，你還要參考下一節的介紹 -
使用全局變量
如果你在你的src目錄中的js文件中使用上面所述的js文件中的全局變量，那麽會報錯，因為eslint並不知道這個變量是什麽，為了避免這個錯誤的發生可以通過window來訪問，即const $ = window.$;這樣類似的結構就可以訪問到全局變量，如果你不想通過window訪問可以在使用變量的那一行代碼的後面添加 // eslint-disable-line 此註釋即可 -
添加bootstrap
隨著前端框架的盛行，原始的bootstrap已經快死了，react抄襲bootstrap做了一個react-bootstrap，用來充當自己的ui組件庫，真的太low了，好好跟人家vue學學啊 https://react-bootstrap.github.io/，這時react-bootstrap的官網 安裝 npm install --save react-bootstrap [email protected]3 css還要單獨的引入，在src/index.js中導入 import ‘bootstrap/dist/css/bootstrap.css‘; import ‘bootstrap/dist/css/bootstrap-theme.css‘; 在src/App.js中導入你自己要的組件 import { Navbar,Jumbotron,Button } from ‘react-bootstrap‘ 註意點：這裏react官網上，叫我們自己發布基於bootstrap的樣式包，然後自己安裝，自己體會吧，不得不吐槽 -
添加Flow
Flow是一個靜態數據類型檢測工具，像java,c++這樣的語言都是靜態類型的，js和python都是動態類型的，也就是說js的數據類型可以隨便修改，但是這個隨便修改可能出現很多錯誤，打個很簡單的比方，這個問題也是我平常遇到的，就是給一個值賦值數字，然後經過後臺傳遞的數據修改成了字符串版的數字，就導致程序運行失敗，但是谷歌也不報錯，這尼瑪就尷尬了，我找這個問題找了很長時間，所以如果此時js能夠有靜態版的數據類型這樣的錯誤就可以避免了，TypeScript就是幹這個的，但是react和Flow搭配的比較好，所以想成為一名不折不扣的超級前端工程師還是看看flow吧，https://flowtype.org/，下面是將flow引到react中來 npm install --save flow-bin 在package.json文件中添加命令 "flow": "flow" 運行 npm run flow init 會生成 .flowconfig配置文件，不用動他 然後在你需要檢測的文件的頂部添加 // @flow 註釋，看沒看到，在我們用註釋註釋代碼的時候人家已經用註釋編程了，當你把代碼寫好後運行npm run flow，就可以檢測是否有數據類型錯誤了 -
添加環境變量
1.在項目中可以使用聲明在環境中的變量，就好像這個變量是定義在項目的js文件中一樣，默認情況下，可以使用的環境變量有NODE_ENV(這個環境變量已經定義好了)，和其他以REACT_APP_開頭的環境變量 2.這些環境變量在構建的過程中會自動替換成想要的值，如果在運行的過程中，在靜態文件中修改或者使用環境變量，項目不會做出響應，所以你可以重新編譯項目 3.普通的環境變量的創建必須要添加REACT_APP_開頭，並且其他的環境變量除了NODE_ENV以外，都會被忽略，這是為了避免和系統本機的公鑰沖突，如果修改了環境變量，必須重啟你的項目 4.這些環境變量會被定義在process.env上面，比如你有一個環境變量叫做REACT_APP_SECRET_CODE當你在js中使用必須通過process.env.REACT_APP_SECRET_CODE才能訪問到 5.有一種內置的環境變量叫做NODE_ENV，你可以通過process.env.NODE_ENV訪問到這個變量，react不允許自己設置這個變量的值，默認已經設置好了，有development,test,production這幾種情況 6.這些環境變量可以很方便的得到運行環境的相關信息和項目本身之外的敏感數據信息 7.使用環境變量之前需要自己定義變量，定義變量的方式有兩種，第一種是在你的命令行工具中定義，第二種是新建一個.env文件，在public中的index.html中也可以使用環境變量%REACT_APP_WEBSITE_NAME%必須以REACT_APP開頭，所有的環境變量都是編譯的時候插入 第一種方式：通過命令行的方式臨時的添加環境變量，只介紹windows set REACT_APP_SECRET_CODE=abcdef&&npm start 第二種方式：將環境變量定義在.env文件中 在項目根目錄中創建.env文件，在裏面定義變量 REACT_APP_SECRET_CODE=abcdef，還有其他類型的文件，自行了解 -
能不能使用Decorators
這個語法是將一個函數定義的功能，幹到另外一個函數裏面，目前不穩定，react不支持這個 -
整合後端API
主要用來解決後端api接口和前臺跨域的問題，一般情況下，我們的後臺服務器和開發前臺代碼的服務器是不一樣的，因為沒有幾個公司使用node開發服務器，域名端口不一樣所以存在跨域問題，解決這個問題可以直接在package.json文件中添加 "proxy": "http://..." 這樣你在你的localhost下面訪問後臺api如/api/todos直接代理到上面指定的域名中，所以跨域問題就解決了，要註意這種方式只能在開發環境中使用 特殊：如果你開發代碼的環境不是在locallhost下面，那麽上述方法也會是沒用的，關於解決辦法自行查看官網 -
自定義設置proxy
幾種代理路徑的方式 { // ... "proxy": { // 以/api的請求都匹配 "/api": { "target": "<url_1>" }, // 匹配/bar/abc.html "/bar/*.html": { "target": "<url_3>" }, // 匹配 /baz/abc.html and /baz/sub/def.html "/baz/**/*.html": { "target": "<url_4>" } } // ... } 設置的配置項的具體細節，請查看https://github.com/chimurai/http-proxy-middleware#options -
在開發環境中使用HTTPS
可能你後臺使用https的，所以你可以在cmd運行的時候輸入set HTTPS=true&&npm start即可 -
運行測試功能
react腳手架使用jest作為測試工具，jest工具用來做單元測試的，端到端的測試react不支持 jest找自己的測試文件，放在src目錄下，有如下三條規則 1.__tests__目錄下的.js文件 2.後綴.test.js文件 3.後綴.spec.js文件 建議最好將測試文件和源文件放一起，減少搜索路徑 命令行接口 當你運行npm run test，jest會開啟watch模式，一旦以保存文件，就會重新更新 -
結語
關於這篇文章的官網介紹有一部分內容沒有提及，個人感覺對開發項目幫助不大
react.js 之 create-react-app 命令行工具系統講解