React無疑是今年最火的前端框架，github上的star直逼30,000，基於React的React Native的star也直逼20,000。有了React，組件化似乎不再步履蹣跚，有了React Native，前端的邊界似乎廣闊無邊。而Webpack憑借它異步加載和可分離打包等優秀的特性，走在取代Grunt和Gulp的路上。而面向未來的ES6，模塊化的支持似乎已成定局。
我們現在就可以打造自己的Webpack+React+ES6環境並且開始探索起來。
這篇文章就給還沒走在這條路上的前端一個入門的指南。
文章導讀：
一、先把例子跑起來（setup your background）
可以fork我在github上的[react-webpack]demo項目，也可以從頭開始：
1.1 我們在名為react-webpack的新項目中要做的第一件事，就是新建一個package.json文件，它看起來應該是這個樣子的：
{ "name": "react-webpack", "version": "1.0.0", "description": "webpack demo", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot --progress --colors", "build": "webpack --progress --colors" }, "repository": { "type": "git", "url": ".." }, "keywords": [ "react", "webpack" ], "author": "yixuan", "devDependencies": { "babel-core": "^5.8.25", "babel-loader": "^5.3.2", "css-loader": "^0.12.1", "react": "^0.13.3", "react-hot-loader": "^1.3.0", "react-router": "^0.13.3", "webpack": "^1.12.2", "webpack-dev-server": "^1.11.0" }, "dependencies": { "lodash": "~3.10.1", "react-kendo": "~0.13.11" } }
1.2 第二步就是創建我們webpack的配置文件webpack.config.js：
var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', "./js/app.js" ], output: { path: './build', filename: "bundle.js" }, module: { loaders: [ { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, { test: /\.css$/, loader: "style!css" } ] }, resolve:{ extensions:['','.js','.json'] }, plugins: [ new webpack.NoErrorsPlugin() ] };
1.3 同時我們還需要在入口文件index.html中引入程序跑起來的一些必要的東西，雖然他的作用看起來沒有那么明顯：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>New React App</title> <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="css/main.css"> </head> <body> <section id="react"></section> <script src="bundle.js"></script> </body> </html>
注意，這里面引用的bundle.js文件非常重要，他是我們打包后的入口文件，不引入它程序是跑不起來的。
app.js文件是程序的入口文件，我們在這里處理簡單的類似路由的邏輯：
import React from 'react'; import Router from 'react-router'; import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; import HelloHandler from './hello.js'; let App = React.createClass({ render() { return ( <div className="nav"> <Link to="app" className="homelink">Home </Link> <Link to="hello" className="hellolink"> Say Hello</Link> {/* this is the importTant part */} <RouteHandler/> </div> ); } }); let routes = ( <Route name="app" path="/" handler={App}> <Route name="hello" path="/hello" handler={HelloHandler}/> </Route> ); Router.run(routes, function (Handler) { React.render(<Handler />, document.body); });
相信你已經看到了ES6的身影，沒錯，在這里，我們寫ES6的代碼,只要新建js文件，我們就在里面寫ES6的代碼。
我們在入口文件上放上了一個連接，分離我們最熟悉的helloworld代碼。也是為了方便以后我們寫其他的例子可以有單獨的文件，易於管理和查看，就像下面看到的項目目錄一樣，一個js文件就是一個小例子的代碼。
hello.js:
import React from 'react'; let Hello = React.createClass({ render() { return(<div>Hello World!</div>); } }); export default Hello;
1.4 執行：
1 npm install
再加上一些必要的文件入口，我們的項目現在看起來應該是這樣的：
從我的github上面fork下來的目錄應該是這樣的：
里面包含了一些我已經寫好的小例子。當然，我們按照上面的目錄來創建就沒錯啦。
1.5 程序跑起來，執行：
1 npm start
然后訪問[http://localhost:8080/webpack-dev-server/]我們就可以看到項目跑起來了。
二、理解React
隨着Facebook開源了React Native for Android，React的前景似乎更加光明。它從最早的UI框架慢慢演變成了一套web應用的解決方案，並且它衍生出來的React Native更是承載着宏偉的目標：learn once, write anywhere。這對前端來說似乎是種不可抗拒的吸引力。
React有三個關鍵詞：
- Just the ui
- virtual dom
- data flow
要理解React，我從它的這三個關鍵詞入手。
2.1 Just the ui
React 負責UI層面的展現，盡管很多人用React作[MVC]架構中的View層,但這並不是React的本意。
一般的情況下，我們在開發過程中，通常會使用模板或者直接使用HTML來構建UI，而HTML是靜態的，使用模板在大多數情況下是可以滿足需求的，但是在復雜的邏輯情境中就顯得有些吃力了，過多的if else或者邏輯控制在模板里，都會讓代碼變得難以維護，當然這還是說整個項目中使用統一的模板的情況下。
React換了一種思路解決問題，它把UI拆分成組件，而不是通過模板引擎和展示邏輯，使得它可以易於拓展和維護。因此它引入了JSX這種語法規則，可以讓我們使用類似HTML的語法去寫js的函數調用。
2.2 virtual dom
瀏覽器渲染頁面的一般過程通常是這樣的：
1 加載html->生成DOM樹->解析css生成Render樹->生成頁面
那么React的virtual dom是怎么做的呢？
1 生成virtual dom->diff->必要的DOM更新
在這里面大部分的操作放在js中去完成，因為我們都知道dom操作是很昂貴的。所以在一般的情況下React的性能還是很不錯的。
2.3 data flow
React中的數據流是沿着組件樹從上到下單向流動的。
這里的data flow指的是一種應用架構的實現方式，比如說，數據存放在哪里，在哪里觸發事件，如何響應用戶操作。它不是React提供的什么新功能，應該是React構建應用的實踐。我們理解了之后的Flux或許就更加容易理解data flow這個概念了。
2.4 Flux overview
Flux是facebook配套React強推的一種應用架構思想。它利用數據的單向流動為React的可復用的視圖組件提供了補充。
與React的數據流動方式相同，在Flux架構中，數據也是單向流動的：
簡單的說，所有的數據流動都會經過Dispatcher。Action可以通過action creator產生並被提供給dispatcher，但多數情況下action是通過用戶與views的交互產生。
在View層捕獲用戶的交互，產生一個Action，通過觸發注冊在Dispatcher上面的事件回調，使得相關的Store響應Action，然后會觸發到Store上面的onChange事件，進一步的更新View。
數據流動也始終是如上圖所示的單向流動的。
實踐了這個例子：[thinking in react]會對理解React的基本工作原理有很好地幫助。
三、Webpack入門
3.1 什么是Webpack？
說Webpack是類似Grunt和Gulp一樣的打包工具並不合適，說Webpack是類似Browserify的模塊管理工具也還有點類似。然而Webpack做的事情遠不止這些。
Webpack出自facebook的Instagram團隊，在網上找到了比較好的對它主要特性的歸納，如下：
1 同時支持CommonJS和AMD模塊（對於新項目，推薦直接使用CommonJS）； 2 串聯式模塊加載器以及插件機制，讓其具有更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持； 3 可以基於配置或者智能分析打包成多個文件，實現公共模塊或者按需加載； 4 支持對CSS，圖片等資源進行打包，從而無需借助Grunt或Gulp； 5 開發時在內存中完成打包，性能更快，完全可以支持開發過程的實時打包需求； 6 對sourcemap有很好的支持，易於調試。
Webpack將項目中的一切資源都看做是模塊，模塊之間可以互相依賴，Webpack對他們做統一的管理，打包和發布，用於我們的工作流中。
3.2 webpack.config.js文件
在前面我們跑起來了的例子中，我們可以看到webpack.config.js文件，所有跟webpack有關的工作，都在這個文件中進行。
它看起來，目前是這樣的：
var webpack = require('webpack'); module.exports = { entry: [ 'webpack/hot/only-dev-server', "./js/app.js" ], output: { path: './build', filename: "bundle.js" }, module: { loaders: [ { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, { test: /\.css$/, loader: "style!css" }, {test: /\.less/,loader: 'style-loader!css-loader!less-loader'} ] }, resolve:{ extensions:['','.js','.json'] }, plugins: [ new webpack.NoErrorsPlugin() ] };
它通常放在根目錄下，他自己也是一個標准的Commonjs模塊，我們可能已經看到了require，module.exports這樣的標志性關鍵詞。
它的主要的配置參數有：
- entry：
entry: [ 'webpack/hot/only-dev-server', "./js/app.js" ],
它定義了打包的入口文件，數組中的文件會按順序進行，並且它會自行解決依賴問題。
在這里其實我們還定義了Webpack開發服務器，webpack-dev-server，我們可以在package.json文件中看到：
"scripts": { "start": "webpack-dev-server --hot --progress --colors", "build": "webpack --progress --colors" },
這也是我們npm start啟動了服務器之后訪問http://localhost:8080/webpack-dev-server/可以訪問到頁面的原因。
- output：
output: { path: './build', filename: "bundle.js" },
它定義了輸出文件的的位置，包括路徑，文件名，還可能有運行時的訪問路徑（publicPath）參數。
- module：
webpack將所有的資源都看做是模塊，而模塊就需要加載器：
module: { loaders: [ { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, { test: /\.css$/, loader: "style!css" }, {test: /\.less/,loader: 'style-loader!css-loader!less-loader'} ] },
對於不同的文件，我們可以自行配置使用不同的加載器。也可以自行實現合心意的加載器。
在這里我們配置了babel-loader，可以讓我們在js文件中隨心所欲的開始寫ES6規范的代碼。
Webpack的加載器之間可以進行串聯，一個加載器的輸出可以成為另一個加載器的輸入。比如LESS文件先通過less-load處理成css，然后再通過css-loader加載成css模塊，最后由style-loader加載器對其做最后的處理，從而運行時可以通過style標簽將其應用到最終的瀏覽器環境。
- resolve：
resolve:{ extensions:['','.js','.json'] },
Webpack 是使用類似 Browserify 的方式在本地按目錄對依賴進行查找。
resolve屬性中的extensions數組中用於配置程序可以自行補全哪些后綴。比如說我們要require一個common.js文件，添加了這個配置我們只要寫：require('common')；就可以了。
- plugin:
plugins: [ new webpack.NoErrorsPlugin() ]
我們可以在plugin參數中配置我們需要用到的各種各樣的插件。比如我們想將多個文件分開打包，可能會用到:
{ entry: { a: "./a", b: "./b" }, output: { filename: "[name].js" }, plugins: [ new webpack.CommonsChunkPlugin("init.js") ] }
四、現在開始探索&&擴展閱讀
面向未來的ES6，模塊化的支持似乎已成定局。我們通過從webpack中的配置即可馬上開始編寫ES6的代碼。
通過打造這樣的工作環境，我們可以同時使用多種面向未來的新技術開始新的探索。
現在就開始探索吧！不要等到未來到來，卻發現自己還沒做好准備。
擴展閱讀：