Material-UI + React + Babel + Webpack 環境配置
Material-UI 是一套用React寫成的，符合Google Material Design 的UI元件庫。
此庫在編寫的時候用到了ES6與ES7的一些特性，並用Babel構建，於是我稍作研究，給出最小的環境配置來使用Material-UI這套庫。
初始化
建立一個專案目錄並初始化專案（如果沒有的話）
$ mkdir hello-material-ui
$ cd hello-material-ui
$ npm init安裝依賴
按照npm的提示初始化完畢這個目錄後，開始安裝依賴
$ npm install --save react react-dom react-tap-event-plugin material-ui
$ npm install --save-dev babel-core babel-loader
$ npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1 第一行是生產用的 React 與 Material-UI 部分。
第二行是Babel轉換器的核心部分。
第三行是Babel轉換器的三個額外配置：ES2015（ES6），React，Stage1（ES7）。
第四行是Webpack的部分。
第二、三、四行的內容只在工程構建之前有用（用於開發：-dev）。
安裝完畢之後呢，可以先檢查一下 package.json
npm init 之後，目錄中就會有一個 package.json
如果安裝順利，裡面應該有至少這樣一些部分：
版本號不重要，各位配置的時候說不定已經出了新的版本。
如果確認跟隨本文配置失敗，那可以試試完全按照我的版本號來配置。
"dependencies": {
"material-ui": "^0.15.0",
"react": "^15.0.0",
"react-dom": "^15.0.0",
"react-tap-event-plugin": "^1.0.0"
},
"devDependencies": {
"babel-core": "^6.8.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-1 配置 Babel
配置Babel的方案有兩種，一種是在目錄中新建一個.babelrc 的檔案，然後按照JSON格式寫入規則。
另一種，可以將.babelrc 與 package.json 合併（個人推薦）：
在 package.json 中新增一個域"babel"，與之前的"dependencies" 同級。
"babel": {
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": []
}這等同於在.babelrc 中寫入：
{
"presets": [
"es2015",
"react",
"stage-1"
],
"plugins": []
}這樣就將Babel配置好了，接下來考慮一下配置Webpack。
配置 Webpack
在專案目錄新建一個webpack.config.js ，並寫入：
var path = require('path');
module.exports = {
entry: './entry.js',
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [
{ test: /\.jsx?$/, loaders: ['babel'] }
]
}
}看上去很像一個JSON，但它其實不是，它是一個JS物件，你可以把webpack.config.js 當成一個模組。
比起JSON，用JS模組來作為配置更靈活。因為JS模組可以進行運算，甚至配置一些自定義函式。而JSON只能配置一些比較死的東西。
其實也大致能猜出一二的，整個專案的入口是./entry.js ——與webpack.config.js 同個目錄下的一個JS檔案。
具體各個域都有什麼用，更多的配置，參見官方文件。
配置 npm 指令碼
現在我們還缺少一個構建指令碼，編輯package.json 中的 "scripts" 域：
"scripts": {
"build": "webpack",
"build-dev": "webpack -w -d"
}接下來我們就可以在專案目錄下使用簡單的構建指令碼了：
$ npm run build如果是開發中，可以使用監聽式的Webpack，差量打包，提升效率。
$ npm run build-dev按照配置，打包生成的檔案為 dist/bundle.js 。
至此，基本的環境已經配置完畢，我們來嘗試一下呼叫Material-UI庫。
Hello, Material-UI!
接下來用一個簡潔的方式構建一個Web頁面。
建立Web入口
在專案目錄下建立一個index.html，寫入：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>這是最基本的入口，僅設定了編碼，並引用了JS。
編寫Webpack入口
編輯專案目錄下的 entry.js，寫入：
import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
const App = () => (
<MuiThemeProvider muiTheme={getMuiTheme()}>
<AppBar title="Hello, Material-UI!" />
</MuiThemeProvider>
);
let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);然後執行構建指令碼：
$ npm run build輸出了：
Hash: bc7d93c87854ed7f539e
Version: webpack 1.13.0
Time: 11389ms
Asset Size Chunks Chunk Names
bundle.js 1.12 MB 0 [emitted] main
+ 301 hidden modules可以看到，這個Webpack構建一次還是相當花費時間的，bundle.js也不小。
對於Web應用來說，一開始就載入一個MB級別的資源不是一件好事。最好將bundle.js進一步壓縮，併發布到CDN上加速。最好再寫一個輕量的載入動畫來提升使用者體驗。
現在可以看到目錄下有了一個dist/bundle.js。
執行
開啟index.html。
成功！如此我們就生成了一個HTML入口以及一個瀏覽器可以執行的前端JS檔案。理論上來說可以配合任何的Web應用的後端進行開發。無論是使用PHP，Java Servlet、NodeJS（Express等）、Python、Ruby……都沒有問題。