剛剛學習React，發現React在ES6下的語法才是本體，結合ES6新的語言特性，使組件化開發顯得更加直觀。而且現在的Angular2也開始使用支持強類型的TypeScript，轉譯(transpiling)成了家常便飯。不學就分分鍾跟不上時代的腳步了……
在搭建Webpack+React+ES6環境的過程中，我參考過很多2016年的老帖，發現最后運行時都有各種各樣的報錯。版本更新迭代太快了，搭建時的配置也不可避免地有了細微的變化。在各種老帖的基礎上，我總結出2017年可用的搭建步驟如下：
1.下載安裝最新版node.js（https://nodejs.org/en/）
（注意：為了能支持es6，請下載4.0以上版本）
2（可選）.有了node和在node中集成的npm，為了加快框架的下載速度，建議輸入以下命令切換至淘寶源：
npm config set registry http://registry.npm.taobao.org/
3.全局安裝Webpack, Babel, Webpack-dev-server：
npm install babel webpack webpack-dev-server -g
4.建立項目目錄，用npm init 初始化 npm 項目
mkdir react-hello-world cd react-hello-world npm init
注：執行npm init命令時會讓你輸入各種項目信息，一般直接回車就好，會自動填寫默認值。但是，要注意name不能跟我們的模塊和項目文件目錄同名。
初始化時也可以使用以下命令：
npm init -yes
這樣便不會再有詢問的環節，自動生成默認的package.json文件。但是也要手動修改name，不能跟我們的模塊和項目文件目錄同名。
5.在項目中安裝 react, react-dom
npm install react react-dom --save
6.在項目中安裝 Babel 轉換器，需要用到插件 babel-preset-react, babel-preset-latest，latest 即最新的 ES 規范，包括了 Async/Await 這些新特性。
npm install babel-loader babel-core babel-preset-react babel-preset-latest --save
7.創建項目文件，main.js 即項目入口文件，App.js 即 React 組件主文件
touch index.html App.js main.js webpack.config.js
目錄結構如下所示：
8.配置webpack，編輯webpack.config.js
module.exports = { entry: './main.js', // 入口文件路徑 output: { path: '/', filename: 'index.js' }, devServer: { inline: true, port: 3333 }, module: { loaders: [ { test: /\.js$/, // babel 轉換為兼容性的 js exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'latest'] } } ] } }
9.開始寫項目：
(1).index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>React Hello World</title> </head> <body> <div id="app"></div> <script src="index.js"></script> </body> </html>
(2).App.js:
import React from 'react'; class App extends React.Component { render() { return <div>Hello World!</div> } } export default App
(3).main.js:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('app'));
10.配置 npm scripts, 編輯 package.json，在"scripts"屬性處添加一行：
"scripts": { "start": "webpack-dev-server" },
11.基本的框架搭建完畢，npm start 然后打開 http://localhost:3333 試試：
npm start