在當下前端熱潮中璃谨，一大批前端開發(fā)者佑稠，迷失了學習和追求的方向，面對日夜更迭的前端技術逝薪，我想大多數人跟我一樣會覺得自己懂得的太少踱启，會的太少报账，實踐的太少，正因如此我寫下了這一段前言 埠偿，為了提醒自己和大家在這一片浩瀚大海中正確的尋找追求的方向透罢，也告切自己為此修建更加牢固的船舶，從而遠航冠蒋。好了廢話不多說羽圃，我們先從在三大框架中的React.js 入手

? ? ? ? ?我想目前市上的三大MVVM框架大家都有所了解，不了解的在這里就不詳細說明

三大框架

在此列出三個框架的中文學習網址 :

Angular.js :?https://angular.cn/

Vue.js :?https://vuefe.cn/v2/guide/

React.js :?http://react-china.org/

搭建 WebPack + React + Es6開發(fā)環(huán)境

webpack的模塊化抖剿，react的組件化朽寞，以及es6的新特性我相信都很吸引人，在這么多吸引人的框架下斩郎，作為Development的我們如何將他們聯(lián)合在一起愁憔，寫出讓人身心愉悅的項目代碼，這是本文的中心孽拷。本文主要教新手搭建環(huán)境創(chuàng)建項目吨掌，可能有描述不清楚的地方請大家諒解畢竟從沒寫過這么長的文章，不過一定可以運行起來脓恕，本人當時也是入了很多坑才明白膜宋！

簡介：

webpack ：近期最火的一款模塊加載器兼職做打包工具，它能把各種資源炼幔，比如 js秋茫、jsx、css乃秀、less肛著、sass、圖片等作為模塊來使用跺讯，并且可以壓縮這些資源枢贿，話說webpack一路走來過五關斬六將，犧牲者慘目忍睹如：gulp刀脏，grunt....... ?其實各家有各家的優(yōu)點

react.js：現(xiàn)在最熱門的前端框架局荚，可以說沒有之一，作為Facebook開發(fā)的一款JS庫，后臺可為強悍耀态，使用函數式編程轮傍，jsx語法，先進的Virtual Dome首装，使其迅速占領了市場

ECMAScript 6 ：ECMAScript 6.0（以下簡稱 ES6）是 JavaScript 語言的下一代標準创夜，已經在2015年6月正式發(fā)布了。它的目標仙逻，是使得 JavaScript 語言可以用來編寫復雜的大型應用程序挥下，成為企業(yè)級開發(fā)語言。

環(huán)境搭建：

? ? 1：首先我們需要下載安裝node.js,下載地址（http://nodejs.cn/）

最好安裝4.0以上

安裝好node之后 win+r 打開運行桨醋，輸入cmd棚瘟，進入cmd控制臺， 這一步我們需要來確認是否安裝好了node喜最，并且查看node的版本偎蘸，因為安裝node的時候，會自動幫我們安裝npm 瞬内，所以我們也需要檢查一下npm 的版本迷雪，至于npm是什么，還望大家百度谷歌隨意選

node -v 查看node版本

npm -v 查看npm版本

2：創(chuàng)建項目

? 2-1：在電腦隨意那個盤例如說D盤 Dome文件夾下我們在此處輸入cmd虫蝶，這樣我們就成功的在這個文件夾下打開了cmd

輸入cmd

2-2：進入cmd后 我們輸入mkdir ?加上你自己的項目名稱（這里以`AllenTest`為列）章咧，在根目錄下我們就創(chuàng)建了屬于自己的項目文件夾。然后cd ?你的項目文件夾名稱進入該項目

記得mkdir后面加空格

2-3：接下來比較重要的一步是生成package.json 文件在cmd中我們輸入npm init能真，按照提示一直回車就行赁严，如果實在覺得麻煩直接npm init -y

npm init 或者 npm init -y

2-4：這樣在我們的項目文件夾中就會增加一個package.json文件，我們先不動這個文件粉铐，先在項目根目錄新建一個Views的文件夾

然后在根目錄新建兩個文件 .babelrc 和 webpack.dev.config.js

對react組件進行一定的轉化

webpack的配置文件

2-5：接下來我們對這兩個文件進行書寫疼约，第一個我們來編寫 .babelrc?

這樣書寫的含義就在于將部分代碼進行轉換因為目前瀏覽器不支持es6語法

2-6：編寫webpack.dev.config.js文件，第一步我們在這個文件中定義一些我們接下來需要用到的一些參數

定義變量方便調用

2-7：在webpack.dev.config.js文件中添加以下結構

這是webpack的語法蝙泼，建議搭建時可以學習一下webpack的語法便于后面的編碼

2-8：在module.exports 中添加一下結構程剥，這里的含義是實現(xiàn)熱更新，監(jiān)聽代碼修改汤踏，從而實現(xiàn)代碼修改自動刷新頁面的效果

這是很重要的配置 entry定義了入口织鲸，output定義輸出的地址

2-9：繼續(xù)往這個文件中添加以下結構，定義模塊加載器

webpack編碼要求

2-10：結尾部分不詳細講解溪胶，如果感興趣可以聯(lián)系我或者查資料

3：在完成前面這些步驟后搂擦，我們來做最重要的一些步驟，配置項目依賴载荔，其實我在搭建第一個項目環(huán)境的時候經常碰到一種問題就是安裝的依賴太多導致有些混亂不知道那些全局安裝盾饮，那些本地安裝所以在此我們就不一一安裝采桃，使用最便捷的方式懒熙，偷懶的方式哈哈丘损，但不建議新手使用

package.json

在package.json文件中找到 license然后在下面編寫如上圖一樣的依賴 ，編寫完成之后 在項目根目錄打開cmd 輸入 npm install(安裝項目依賴)工扎，在這個時候稍微可以休息下徘钥，因為安裝依賴，會要點時間肢娘，如果網絡不好呈础，建議安裝cnpm 淘寶鏡像 ，來安裝依賴

安裝依賴

安裝好后 ?在項目根目錄會增添一個node-modules的文件夾這個文件夾里面都是我們安裝依賴的一些資源

項目依賴安裝的目錄

然后我們繼續(xù)編寫package.json中Scripts這部分編寫一下代碼

重要的部分

4：在完成上述所有操作后橱健，大致已經完成項目環(huán)境的搭建了 接下來我們就在項目中搞事情了...................在Views文件夾下我們新建兩個文件而钞，我想大家現(xiàn)在應該很熟悉了那就是，index.html 和 index.js 拘荡， 這兩個文件是我們的項目入口

忽略紅色涂鴉部分

5:現(xiàn)在我們就可以在這兩個文件中搞事情了臼节，首先我們編寫html ?，紅色標記的地方別寫錯了,bundle.js 是我們生成的虛擬js 在實際的生產環(huán)境中我們不會這樣做珊皿，我們會對應打包js网缝，下次我會講解

index.html

6:編寫 js ，具體react.js 的語法以后會講解?

index.js

7：現(xiàn)在我們在項目根目錄打開cmd 輸入npm run dev 等執(zhí)行完成后 會自動打開頁面蟋定，我們的hello world就會出現(xiàn)了

到此教程結束謝謝７垭！

附上我的GitHub地址 （https://github.com/wenzirang） 喜歡的話歡迎start ?并且環(huán)境搭建的源代碼也有哦 ?謝謝