概述：學(xué)習(xí)如何配置 Node盖文、Babel 和 Webpack 來高效創(chuàng)建 React 應(yīng)用。著作權(quán)歸作者所有兑巾。
商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處狮鸭。
原文:http://www.w3cplus.com/react/setting-up-react-environment.html?w3cplus.com
注意：本文主要是針對(duì)原文中本人遇到問題的處理方式進(jìn)行分享，如有不足之處希望指出牌柄。
一畸悬、開發(fā)工具概述
設(shè)置 React 開發(fā)環(huán)境，我們需要用到 Node.JS珊佣、Babel蹋宦、Webpack 以及一款編輯器作為開發(fā)工具披粟。
1. Node.JS
很長(zhǎng)一段時(shí)間，JavaScript 只是為瀏覽器寫代碼冷冗。Node.js 改變了這一切守屉，它允許我們用 JavaScript 編寫可以運(yùn)行在服務(wù)器上的應(yīng)用程序，并且可以訪問瀏覽器做夢(mèng)都想不到的 API 和系統(tǒng)資源拇泛。它基本上是一個(gè)完整的應(yīng)用程序開發(fā)運(yùn)行時(shí)， 它的應(yīng)用程序全部都是創(chuàng)建和運(yùn)行在 JavaScript 上思灌，而不是 Java俺叭、C#泰偿、C++ 等之上耗跛。
這里我們只是用 Node.js 來管理依賴课兄，并且將 JSX 轉(zhuǎn)換為 JavaScript 所需的步驟捆在一起搬俊。將 Node.js 當(dāng)作是讓開發(fā)環(huán)境工作的膠水蜒茄。
2. Babel
Babel 是一個(gè) JavaScript 轉(zhuǎn)換器唉擂，它將 JavaScript 變成 JavaScript（現(xiàn)在是將高版本的 ES6/ES7 轉(zhuǎn)換為 ES5）。這聽起來有點(diǎn)古怪檀葛，所以我來澄清一下玩祟。如果我們?cè)诖a中使用最新的 JavaScript 功能，那么舊瀏覽器在遇到新的函數(shù)/屬性時(shí)屿聋，是不認(rèn)識(shí)的空扎。如果代碼中包含有 JSX，沒有瀏覽器會(huì)知道要用它做什么润讥！
Babel 所做的就是將你的新奇的 JS 或者 JSX 轉(zhuǎn)換成大多數(shù)瀏覽器能理解的 JS 形式转锈。我們已經(jīng)用了瀏覽器內(nèi)的版本來將 JSX 轉(zhuǎn)換為 JavaScript。后面楚殿，你會(huì)看到我們?nèi)绾螌?Babel 集成為構(gòu)建過程的一部分撮慨，來將 JSX 生成為瀏覽器能讀的 JS 文件。
3. Webpack
我們要依賴的最后一個(gè)工具是 webpack，它是一個(gè)模塊打包器砌溺。先把花哨的標(biāo)題放一邊影涉，你的應(yīng)用包含的很多框架和庫有很多依賴，你所依賴的這些功能的不同部分可能只是一個(gè)較大組件的一個(gè)子集规伐。
你可能不要要所有不需要的代碼蟹倾，而 webpack 這類工具會(huì)扮重要的角色，讓你只包含讓應(yīng)用程序能工作所需的相關(guān)代碼楷力。它們經(jīng)常把所有相關(guān)的代碼（甚至來自不同源文件）打包為一個(gè)文件：
我們將依賴 webpack 把 React 庫、JSX 文件和任何其它 JavaScript 的相關(guān)部分打包為一個(gè)文件孵户。它還能擴(kuò)展到 CSS（LESS/SASS）文件和應(yīng)用程序所用的其它類型的素材萧朝，但是這里我們只關(guān)注 JavaScript。
二夏哭、項(xiàng)目目錄
三检柬、問題處理
1、最后一步[創(chuàng)建和測(cè)試應(yīng)用程序]的時(shí)候如果是Windows系統(tǒng)要注意命令用反斜杠:
解決方法：
[Mac上輸入以下代碼]：
./node_modules/.bin/webpack
[Windows應(yīng)該這樣]：
.\node_modules\.bin\webpack
------------------------------------------------------------------------------------------------------------------
2竖配、執(zhí)行出現(xiàn)Can't resolve 'babel'的錯(cuò)誤：
解決方法：
需要在webpack.config.js文件里修改babel的配置
loader:'babel',
//修改為：
loader:'babel-loader'
------------------------------------------------------------------------------------------------------------------
3何址、ERROR in Cannot find module 'babel-core'. using react.js, webpack, and express server
解決方法：
在終端/命令行提示符中輸入：
npm install babel-core babel-loader--save-dev
