前言
Update
- [20160725] Facebook 官方提供了一個可以生成React Starter項目的工具，有興趣可以看下：create-react-app
React技術之火爆無須多言，其與webpack的完美結合，也讓二者毋庸置疑的成為天生一對。為了進行React的快速和規范化開發，開源社區中涌現了很多React+webpack的boilerplate項目。通過使用這些boilerplate，我們可以快速的創建一個React項目的架構。
蔥哥之前專門創建了一個Github項目用于收集這些boilerplate：awesome-react-boilerplate。當然這里不可能完整收錄，但是目前為止已經有近30個了。連boilerplate都這么多，真讓我們眼花繚亂，無從下手。
當然，由于每個人的使用習慣和技術背景的不同，每個boilerplate都會有自己的側重點，因此即便是公認比較好的boilerplate項目也未必適合所有人。我們拿到這些開源項目，只是知其然但是并不知其所以然。蔥哥相信，只有適合自己的，才是最好的。這就是本文的初衷，蔥哥會追根溯源，從項目開發的蠻荒階段開始，搭建開發環境，配置webpack，在React項目中使用webpack，搭建項目的測試環境，一步一步構建適合適合自己的React + webpack起始項目。
本文陸陸續續寫了將近一個月的時間，所使用的技術和依賴庫均選用目前最新版本，其間大大小小的坑踩過不知道多少。本文供入門參考，如果你是前端大牛，請直接忽略此文。
當然，如果讀后覺得對你有幫助，還請關注蔥哥的Github。
TL;DR
代碼
本文所有代碼可以在我的Github中找到：
將使用的技術棧
如前所述，本文的主要目的是構建適合適合自己的React + webpack起始項目。與其他多數類似項目不同的是，我們不僅要支持ES6，使用webpack，而且要搭建一套相對完整的單元測試和自動化測試體系。本文主要使用到的相關技術如下：
- React
- webpack
- babel
- ES6
- mocha
- chai
- sinon
- karma
- phantomJS
webpack快速入門
webpack介紹
Webpack是一個前端模塊管理工具，有點類似browserify，出自Facebook的Instagram團隊，但功能比browserify更為強大，可以說是目前最為強大的前端模塊管理和打包工具。
Webpack將項目中的所有靜態資源都當做模塊，模塊之間可以互相依賴，由webpack對它們進行統一的管理和打包發布，下圖為官方網站說明：
webpack對React有著與生俱來的良好支持，隨著React的流行，webpack也成了React項目中必不可少的一部分。特別是隨著ES6的普及，使得webpack有了更廣闊的用武之地。
安裝配置webpack
安裝nodejs
安裝webpack之前，需要確認本機已經安裝好了nodejs。
如果還沒有安裝，請去nodejs官網下載安裝即可。這里使用的node版本是V4.4.1.
初始化項目環境
$ mkdir react_boilerplate
$ cd react_boilerplate\
$ npm init -y
Wrote to .\react_boilerplate\package.json:
{
"name": "react_boilerplate",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
npm init 加上一個-y選項會生成一個默認的package.json,關于這個文件，不是本文重點，在此不會詳述，可以參考官方文檔。可以簡單的理解，這個文件是用于管理項目里面的依賴包的。
設置.gitignore
如果我們使用git進行版本管理，一個.gitignore文件是必要的。這里我們可以先將項目需要安裝的node包目錄添加進去。
node_modules
使用npm install安裝的node包都會在node_modules目錄下，這個目錄是不需要commit到git的。
安裝webpack
安裝webpack很簡單，命令如下：
npm i webpack --save-dev
其中--save-dev表示該包為開發環境依賴包。安裝完后會生成一個node_modules目錄，并且在package.json文件中多出如下幾行：
......
"devDependencies": {
"webpack": "^1.13.0"
}
}
如果寫為--save則表示該包為生產環境依賴包，在package.json文件中會新增或者修改dependencies 字段。
初始化項目結構和代碼
安裝完webpack后，我們可以給項目中增加一些內容了。項目的簡單結構如下圖所示：
app目錄用于存放項目代碼，dist目錄為編譯后的項目文件，webpack.config.js為webpack的配置文件。
我們給項目中的文件添加一些簡單的代碼，首先是組件代碼：
app/component.js
module.exports = function () {
var element = document.createElement('h1');
element.innerHTML = 'Hello world';
return element;
};
然后需要一個入口文件，在入口文件中使用上面定義的組件：
app/index.js
var component = require('./component');
document.body.appendChild(component());
配置webpack
我們需要讓webpack知道如何處理我們的項目目錄結構，因此需要配置文件webpack.config.js。一個簡單的配置文件如下所示：
var webpack = require('webpack');
var path = require('path'); //引入node的path庫
var config = {
entry: ['./app/index.js'], //入口文件
output: {
path: path.resolve(__dirname, 'dist'), // 指定編譯后的代碼位置為 dist/bundle.js
filename: 'bundle.js'
},
module: {
loaders: [
// 為webpack指定loaders
//{ test: /\.js$/, loaders: ['babel'], exclude: /node_modules/ }
]
}
}
module.exports = config;
到目前為止，我們已經可以讓webpack工作了，在命令行執行
webpack
我們看到，會有一個新的文件/dist/bundle.js生成出來了。但是我們還需要一個html文件來加載編譯后的代碼，這就需要用到一個webpack插件：html-webpack-plugin。
安裝html-webpack-plugin
使用如下命令安裝：
npm install html-webpack-plugin --save-dev
然后在我們的webpack.config.js中增加下面幾行：
plugins: [
new HtmlwebpackPlugin({
title: 'React Biolerplate by Linghucong'
})
]
現在在命令行下再次執行webpack命令，會看到在dist目錄下生成了兩個文件：bundle.js和index.html。其中index.html內容如下：
dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React Biolerplate by Linghucong</title>
</head>
<body>
<script src="bundle.js"></script></body>
</html>
有必要提一下，如果我們安裝webpack的時候使用的是全局安裝選項（npm install -g webpack），可以在命令行中直接執行webpack命令；如果沒有使用-g，那么要用的webpack可執行文件位于：
./node_modules/.bin/webpack
我們可以在package.json中為此命令增加一個快捷方式：
// package.json
... other stuff
"scripts": {
"build": "./node_modules/.bin/webpack"
}
現在就可以直接使用命令npm run build來執行webpack了。
$ npm run build
> react_boilerplate@1.0.0 build D:\node\react_boilerplate
> webpack
Hash: cbf754a65493b4d791d7
Version: webpack 1.13.0
Time: 919ms
Asset Size Chunks Chunk Names
bundle.js 233 kB 0 [emitted] main
index.html 179 bytes [emitted]
[0] multi main 52 bytes {0} [built]
[75] ./app/index.js 82 bytes {0} [built]
[76] ./app/component.js 142 bytes {0} [built]
+ 74 hidden modules
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
安裝webpack-dev-server
webpack-dev-server可以讓我們在本地啟動一個web服務器，使我們更方便的查看正在開發的項目。其安裝也十分簡單：
npm i webpack-dev-server --save-dev
然后在webpack.config.js文件中作如下修改：
// webpack.config.js
// ...
entry: [
'webpack/hot/dev-server',
'webpack-dev-server/client?http://localhost:3000',
'./app/index.js' //入口文件
],
// ...
我們可以在package.json中增加webpack-dev-server的快捷方式：
// package.json
... other stuff
"scripts": {
"dev": "webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
"build": "./node_modules/.bin/webpack"
}
配置中指定web服務器端口號為3000，指定目錄為dist。
運行npm run dev：
$ npm run dev
> react_boilerplate@1.0.0 dev D:\node\react_boilerplate
> webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist
......
Time: 1109ms
Asset Size Chunks Chunk Names
bundle.js 274 kB 0 [emitted] main
index.html 179 bytes [emitted]
chunk {0} bundle.js (main) 216 kB [rendered]
[0] multi main 52 bytes {0} [built]
......
......
......
[77] ./app/component.js 142 bytes {0} [built]
Child html-webpack-plugin for "index.html":
chunk {0} index.html 505 kB [rendered]
[0] ./~/html-webpack-plugin/lib/loader.js!./~/html-webpack-plugin/default_index.ejs 540 bytes {0} [buil
t]
[1] ./~/lodash/lodash.js 504 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
webpack: bundle is now VALID.
web服務器啟動完畢，此時訪問 http://localhost:3000/ 就可以看到我們的“Hello world”了。
需要特別說明的是，webpack-dev-server是支持熱加載的，也就是說我們對代碼的改動，保存的時候會自動更新頁面。比如我們在文件中將“Hello world”改為“Linghucong”，會看到頁面實時更新了，無須再按F5刷新，爽吧？！
webpack-dev-server的配置還可以放在webpack.config.js中，需要使用一個devServer屬性，詳細可以參考官方文檔。
處理CSS樣式
項目中使用CSS是必不可少的。webpack中使用
loader的方式來處理各種各樣的資源，根據設定的規則，會找到相應的文件路徑，然后使用各自的loader來處理。CSS文件也需要特定的loader，一般需要使用兩個：css-loader和 style-loader，如果使用LESS或者SASS還需要加載對應的loader。這里我們使用LESS，因此安裝loaders:
npm install css-loader style-loader less-loader --save-dev
踩坑提醒
npm3.0以上需要單獨安裝less：npm install less --save-dev。
然后在文件webpack.config.js中配置：
{
test: /\.less$/,
loaders: ['style', 'css', 'less'],
include: path.resolve(__dirname, 'app')
}
可以看到，test里面包含一個正則，包含需要匹配的文件，loaders是一個數組，包含要處理這些文件的loaders，注意loaders的執行順序是從右到左的。
新建一個LESS文件/app/index.less，其內容如下：
h1 {
color: green;
}
在入口文件index.js中引入這個文件：
require('./index.less');
然后運行webpack進行編譯：npm run build:
$ npm run build
> react_boilerplate@1.0.0 build D:\node\react_boilerplate
> webpack
Hash: 0c25c4bacdc334db1e04
Version: webpack 1.13.0
Time: 1902ms
Asset Size Chunks Chunk Names
bundle.js 243 kB 0 [emitted] main
index.html 179 bytes [emitted]
[0] multi main 52 bytes {0} [built]
[75] ./app/index.js 110 bytes {0} [built]
[80] ./app/component.js 141 bytes {0} [built]
+ 78 hidden modules
Child html-webpack-plugin for "index.html":
+ 3 hidden modules
可以看到， http://localhost:3000/ 頁面上的文字已經變成綠色了。
到目前為止的代碼可以在react_boilerplate _v1中查看。
webpack 支持ES6
Javascript包管理格式
Javascript中的包管理比較常見的有幾種方式：
CommonJS
//CommonJS 定義的是模塊的同步加載，主要用于NodeJS
var MyModule = require('./MyModule');
// export at module root
module.exports = function() { ... };
// alternatively, export individual functions
exports.hello = function() {...};
AMD
//AMD 是異步加載，比如require.js使用這種規范
define(['./MyModule.js'], function (MyModule) {
// export at module root
return function() {};
});
// or
define(['./MyModule.js'], function (MyModule) {
// export as module function
return {
hello: function() {...}
};
});
ES6
//ES6 變得越來越主流了
import MyModule from './MyModule.js';
// export at module root
export default function () { ... };
// or export as module function,
// you can have multiple of these per module
export function hello() {...};
還有其他格式如UMD、CMD等，在此不再一一介紹。webpack對這些模塊格式都可以很好的支持。在我們之前的項目中使用的是CommonJS格式的模塊管理，但是隨著ES6的普及和應用，同時得益于強大的Babel的存在，使我們可以方便的使用ES6的語法，而不必考慮瀏覽器支持的問題。
webpack支持ES6語法
在webpack中支持ES6同樣只需要安裝配置相應的loader就可以了。
安裝如下：
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
在webpack.config.js中添加loader如下：
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/,
query: {
presets: ['react', 'es2015']
}
}
由于后邊需要支持React的jsx文件，所以我們在這里安裝了babel-preset-react。
順便提一下，我們可以在項目根目錄下創建一個.babelrc文件，將loader中的presets放在文件.babelrc中：
// .babelrc
{
"presets": ["react", "es2015"]
}
此時我們運行npm run build，正常編譯后，使用npm run dev，啟動web服務器，打開 http://localhost:3000/ 可以看到頁面已經可以正常顯示了。
踩坑提醒
如果上面對于loader的配置寫為（注意這里是loaders不是loader）：
{
test: /\.jsx?$/,
loaders: ['babel'],
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}
則可能會出現這樣的錯誤：
$ npm run build
> react_boilerplate@1.0.0 build D:\node\react_boilerplate
> webpack
D:\node\react_boilerplate\node_modules\webpack-core\lib\LoadersList.js:54
if(!element.loader || element.loader.indexOf("!") >= 0) throw new Error("Cannot define 'query' and multiple loaders in loaders list");
^
Error: Cannot define 'query' and multiple loaders in loaders list
at getLoadersFromObject (D:\node\react_boilerplate\node_modules\webpack-core\lib\LoadersList.js:54:65)
at LoadersList. (D:\node\react_boilerplate\node_modules\webpack-core\lib\LoadersList.js:78:12)
at Array.map (native)
at LoadersList.match
...
原因是使用了多個loader，而query僅僅作用于babel-loader。如果非要使用loaders加載多個loader，可以做如下修改：
var babelPresets = {presets: ['react', 'es2015']};
......
loaders: ['other-loader', 'babel-loader?'+JSON.stringify(babelPresets)]
......
到目前為止的代碼可以在react_boilerplate _v2中查看。
在項目中支持使用React
關于React的介紹和基本概念相信你已經有所了解，如果需要，可以參考本文最后的“參考閱讀”中的鏈接，在此不再詳述。
安裝React
npm install react react-dom --save
這里我們使用的版本是15.0.1。
$ npm install react react-dom --save
react_boilerplate@1.0.0 D:\node\react_boilerplate
+-- react@15.0.1
| `-- fbjs@0.8.1
| +-- isomorphic-fetch@2.2.1
| | +-- node-fetch@1.5.1
| | | +-- encoding@0.1.12
| | | | `-- iconv-lite@0.4.13
| | | `-- is-stream@1.1.0
| | `-- whatwg-fetch@0.11.0
| `-- ua-parser-js@0.7.10
`-- react-dom@15.0.1
改造項目結構
在項目中我們使用了html-webpack-plugin插件來用webpack自動生成入口的index.html文件，但是里面的內容我們沒法控制。html-webpack-plugin提供了一種模板的機制，可以讓我們對生成的文件內容進行定制。
創建模板文件
我們使用一個新的目錄templates用于存放模板文件，新建一個index.ejs文件：
templates/index.ejs
<%= htmlWebpackPlugin.options.title %>
Welcome to New Page
修改 html-webpack-plugin 設置
修改webpack.config.js文件如下：
plugins: [
new HtmlwebpackPlugin({
title: 'React Biolerplate by Linghucong',
template: path.resolve(__dirname, 'templates/index.ejs'),
inject: 'body'
})
]
關于 html-webpack-plugin 更多高級用法可以參考其項目主頁。
支持sourcemap
sourcemap的作用各位自行Google吧。要生成編譯出的js文件的sourcemap文件，只需要在webpack配置文件中加入如下一行配置即可：
devtool: 'source-map',
運行npm run build可以看到一個會在dist目錄生成一個新的文件bundle.js.map，這就是sourcemap文件。
Minification 代碼壓縮
要對生成的js文件進行壓縮，需要使用一個新的插件：UglifyJsPlugin。
修改webpack.config.js如下：
......
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
var config = {
......
plugins: [
......
new UglifyJsPlugin({ minimize: true })
]
}
module.exports = config;
運行npm run build可以看到生成的bundle.js文件已經被minify了。
在實際的項目開發中，我們在開發階段一般不需要將代碼minify，因為壓縮之后很不方便調試。因此，我們有必要將開發模式和發布模式區分開。我們通過設置process.env.WEBPACK_ENV來做區分。
修改webpack.config.js如下：
......
var env = process.env.WEBPACK_ENV;
var outputFile;
var plugins = [new HtmlwebpackPlugin({
title: 'React Biolerplate by Linghucong',
template: path.resolve(__dirname, 'templates/index.ejs'),
inject: 'body'
})];
if (env === 'build') {
var UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
plugins.push(new UglifyJsPlugin({ minimize: true }));
outputFile = 'bundle.min.js';
} else {
outputFile = 'bundle.js';
}
var config = {
......
output: {
path: path.resolve(__dirname, 'dist'),
filename: outputFile
},
......
plugins: plugins
}
module.exports = config;
同時需要修改npm run的快捷方式，在package.json文件中修改如下：
"scripts": {
"dev": "WEBPACK_ENV=dev webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
"build": "WEBPACK_ENV=build webpack"
},
踩坑提醒
在Windows系統上不能像上述那樣設置WEBPACK_ENV，可以使用set來設置，如下：
"scripts": {
"test": "mocha --compilers js:babel-register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm test -- --watch",
"dev": "set WEBPACK_ENV=dev&&webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
"build": "set WEBPACK_ENV=build&&webpack"
},
更新項目代碼
對我們的組件稍作修改：
import './index.less';
import component from './component';
let content = document.getElementById("content");
content.appendChild(component());
然后編譯，運行：
$ npm run build
$ npm run dev
可以看到，目前訪問 http://localhost:3000/ 的頁面顯示已經發生了變化。
通過查看源代碼，可以看到我們頁面正是應用了我們的模板文件。
到目前為止的代碼可以在react_boilerplate _v3中查看。
創建React組件
我們將app/index.js修改一下，創建一個新的React組件。
app/index.js
import React from 'react';
import ReactDOM from 'react-dom';
class HelloReact extends React.Component {
render() {
return Hello React!
}
}
ReactDOM.render(, document.getElementById('content'));
代碼十分簡單，引入了react和react-dom，創建了一個叫做HelloReact的組件，并將其渲染到頁面上id為content的DOM元素內。
編譯React代碼
我們在之前已經在webpack的配置中配置好了對React的支持，因此目前不需要做什么修改了。
npm run build之后就可以在頁面上看到“Hello React!”了。
至此，我們基于ES6并使用webpack和Babel的React初始項目已經可以完美運行了。
到目前為止的代碼可以在react_boilerplate _v4中查看。
測試環境搭建（Mocha + Chai + Sinon）
所用技術介紹
如上所見，我在這里使用Mocha + Chai + Sinon 這幾個技術來搭建我們的測試環境，簡單介紹如下：
- Mocha：用于運行我們的測試用例。
- Chai：Mocha用的斷言庫。
- Sinon：用于創建一些mocks/stubs/spys。
另外值得一提的是，AirBnB創建了一個專門針對React代碼測試的開源程序：Enzyme，有興趣的可以研究一下。
Mocha安裝及環境配置
安裝Mocha、Chai以及Sinon
安裝很簡單，命令如下：
npm i mocha chai sinon --save-dev
因為我們要支持ES6的語法，因此還需要安裝一個額外的插件babel-register：
npm i babel-register --save-dev
寫一個簡單的測試用例
Mocha默認會去當前目錄下找test目錄，然后在其中去找后綴為.js的文件。如果需要修改這個目錄，可以使用Mocha的參數進行設置。
我們這里創建一個新的目錄，叫做test，然后一個新的Spec文件：
index.spec.js
import { expect } from 'chai';
describe('hello react spec', () => {
it('works!', () => {
expect(true).to.be.true;
});
});
這個時候我們在命令行中使用命令mocha --compilers js:babel-register運行mocha，如果順利的話，可以看到如下結果：
$ mocha --compilers js:babel-register
hello react spec
√ works!
1 passing (11ms)
簡單解釋一下這里的babel-register。如果這里沒有添加--compilers選項，則mocha會按照默認的方式執行，也就是“讀取spec文件”->“運行測試用例”。使用了babel-register之后，則執行順序為“讀取spec文件”->“將ES6代碼編譯為ES5代碼”->“運行測試用例”。
踩坑提醒
如果執行mocha --compilers js:babel-register命令的時候，出現如下的錯誤：
$ mocha --compilers js:babel-register
D:\node\react_boilerplate\test\index.spec.js:1
(function (exports, require, module, __filename, __dirname) { import { expect } from 'chai';
^^^^^^
SyntaxError: Unexpected reserved word
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at loader (D:\node\react_boilerplate\node_modules\babel-register\lib\node.js:126:5)
at Object.require.extensions.(anonymous function) [as .js] (D:\node\react_boilerplate\node_modules\babel-register\lib\node.js:136:7)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at C:\Users\i301792\AppData\Roaming\npm\node_modules\mocha\lib\mocha.js:219:27
at Array.forEach (native)
at Mocha.loadFiles (C:\Users\i301792\AppData\Roaming\npm\node_modules\mocha\lib\mocha.js:216:14)
at Mocha.run (C:\Users\i301792\AppData\Roaming\npm\node_modules\mocha\lib\mocha.js:468:10)
at Object. (C:\Users\i301792\AppData\Roaming\npm\node_modules\mocha\bin\_mocha:403:18)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3
這個錯誤可能是由于Babel的版本引入的。在這里提供了一個解決方案：
在我們項目中創建一個.babelrc文件，其內容如下：
{
"presets": ["react", "es2015"]
}
其作用之前講過了。現在就可以將我們webpack.config.js中對應設置刪除了：
//webpack.config.js
...
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /node_modules/
},
創建測試工具庫test_helper.js
注意到我們在每個測試spec文件中，都會需要引入chai庫的expect，這樣就會有很多重復代碼。當然還有其他一些通用的幫助性代碼，因此我們需要一個庫來集中進行管理。這里我們創建一個新的文件/test/test_helper.js:
/test/test_helper.js
import { expect } from 'chai';
import sinon from 'sinon';
global.expect = expect;
global.sinon = sinon;
在這里我只是添加了chai的expect，以及引入了sinon。
現在就可以將index.spec.js文件的第一行刪除，然后通過如下的命令來執行mocha命令了：
mocha --compilers js:babel-register --require ./test/test_helper.js --recursive
執行結果如下：
λ mocha --compilers js:babel-register --require ./test/test_helper.js --recursive
hello react spec
√ works!
1 passing (12ms)
配置package.json中的快捷方式
在package.json中我們可以創建上述mocha命令的快捷方式。在scripts字段中作如下修改：
<pre>
//package.json
"scripts": {
"test": "mocha --compilers js:babel-register --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm test -- --watch",
"dev": "webpack-dev-server --port 3000 --devtool eval --progress --colors --hot --content-base dist",
"build": "webpack"
},
</pre>
然后就可以使用
npm run test
來直接運行mocha了。
注意這里我還新增加了一個npm run test:watch快捷方式，其實就是使用了mocha的--watch選項。有了它，當我們在對代碼進行修改的時候，就會自動運行test了。
到目前為止的代碼可以在react_boilerplate _v5中查看。
使用Karma測試
karma安裝與配置
Karma是一個基于Node.js的前端測試啟動器（Test Runner），它出自Google的Angularjs團隊。該工具可用于測試所有主流Web瀏覽器，可以支持Chrome、Safari、Firefox、IE、Opera甚至PhantomJS。
安裝Karma：
npm install karma --save-dev
然后還需要安裝我們需要用到的一些依賴庫：
npm install lolex phantomjs-prebuilt phantomjs --save-dev
npm install karma-chai karma-chai-plugins karma-chai-sinon karma-mocha karma-mocha-reporter karma-phantomjs-launcher karma-sinon karma-sinon-chai karma-sourcemap-loader karma-webpack --save-dev
踩坑提醒
不要問我為什么裝那么多擴展，因為我踩過很多坑，這里就直接跳過了:<
然后我們就可以使用karma命令來生成一個配置文件。
λ .\node_modules\.bin\karma.cmd init karma.conf.js
Which testing framework do you want to use ?
Press tab to list possible options. Enter to move to the next question.
> mocha
Do you want to use Require.js ?
This will add Require.js plugin.
Press tab to list possible options. Enter to move to the next question.
> no
Do you want to capture any browsers automatically ?
Press tab to list possible options. Enter empty string to move to the next question.
> PhantomJS
> Chrome
>
What is the location of your source and test files ?
You can use glob patterns, eg. "js/*.js" or "test/**/*Spec.js".
Enter empty string to move to the next question.
> app/*.js
> test/*.spec.js
>
Should any of the files included by the previous patterns be excluded ?
You can use glob patterns, eg. "**/*.swp".
Enter empty string to move to the next question.
>
Do you want Karma to watch all the files and run the tests on change ?
Press tab to list possible options.
> yes
Config file generated at "D:\node\react_boilerplate\karma.conf.js".
然后我們就可以使用karma start命令來運行我們的測試用例了。不過現在直接運行可能還有一些問題，暫時先不管。
優化Karma配置文件
我們使用一個單獨的文件test.webpack.js來保存測試文件的路徑，方便在karma設置中進行預處理。新建文件test.webpack.js如下：
function requireAll(requireContext) {
return requireContext.keys().map(requireContext);
}
var modules = requireAll(require.context("./test", true, /.+\.spec\.jsx?$/));
module.exports = modules
然后修改karma.config.js:
var webpackConfig = require('./webpack.config');
webpackConfig.devtool = 'inline-source-map';
module.exports = function (config) {
config.set({
browsers: [ 'PhantomJS' ],
singleRun: true,
frameworks: [ 'mocha', 'chai', 'sinon', 'sinon-chai' ],
files: [
'test.webpack.js'
],
plugins: [
'karma-phantomjs-launcher',
'karma-chrome-launcher',
'karma-chai',
'karma-mocha',
'karma-sourcemap-loader',
'karma-webpack',
'karma-mocha-reporter',
'karma-sinon',
'karma-sinon-chai'
],
preprocessors: {
'test.webpack.js': [ 'webpack', 'sourcemap' ]
},
reporters: [ 'mocha' ],
webpack: webpackConfig,
webpackServer: {
noInfo: true
},
autoWatch: true
});
};
運行Karma
好了，到現在為止，我們可以正常運行我們的測試用例了。使用命令karma start運行結果如下：
$ karma start
START:
29 04 2016 13:26:50.350:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
29 04 2016 13:26:50.375:INFO [launcher]: Starting browser PhantomJS
29 04 2016 13:26:52.072:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket /#05AECTTMgBTkXK4kAAAA with id 76498752
hello react spec
√ works!!!
Finished in 0.008 secs / 0.001 secs
SUMMARY:
√ 1 test completed
可以看到，測試用例測試通過了。
目前我們在karma的配置文件中設置的瀏覽器類型是“browsers: [ 'PhantomJS' ]”，也就是會使用PhantomJS來運行。如果需要使用其他瀏覽器，可以做相應修改，甚至添加多個。比如我們要支持打開Chrome瀏覽器運行測試，修改如下：
browsers: [ 'Chrome' ]
正常運作的前提是，必須事先安裝好了對應的插件，對應Chrome的就是'karma-chrome-launcher'，其他瀏覽器類型類似處理。
添加karma快捷方式到npm
我們之前使用npm run test來運行測試，npm run test:watch來監聽文件改變并運行測試。使用karma之后，需要在package.json中作如下修改：
"scripts": {
"test": "karma start",
"test:watch": "watch \"npm run test\" app/",
......
}
另外需要安裝一個npm包：
npm install watch --save-dev
這樣我們就可以使用npm run test來運行測試，npm run test:watch來監聽文件改變并自動運行測試了：
到目前為止我們自己的react boilerplate已經創建完畢了！代碼可以在react_boilerplate _v6中查看。
后記
本文帶你一步步建立了自己的react boilerplate項目，但是需要知道的是，文中所述甚淺，只是帶你入門罷了。其中每一個話題，都可以展開來再寫一系列的文章。比如測試所用的mocha+chai+sinon套裝，比如React測試利器Enzyme等。即便是文中已經成型的代碼，亦多有可優化的地方。如果你有好的意見或者建議，也歡迎到這個Github repo上來提pull request或者issue：
https://github.com/jiji262/react_boilerplate
最后，感謝閱讀。
參考鏈接
Building Your First React.js App
Building modular javascript applications in ES6 with React, Webpack and Babel
STATIC SITE GENERATION WITH REACT AND WEBPACK
LEARN REACT.JS A LITTLE AT A TIME, PART 1
Setting up React for ES6 with Webpack and Babel
Mocha + Chai.js unit testing for ES6 with Istanbul code coverage
