我在Box工作，负责用React来设计全新的Admin Console，在开发中我发现配置Webpack和测试是非常繁琐的事情，所以决定整理一下自己平时的经验，写了一套脚手架来帮助开发人员快速开发React项目。
这是一款基于Webpack的React项目脚手架，相比其他的脚手架，它具有如下优点：
1、React v15.1.x
2、ES6 + Babel
3、支持Sass加载，你可以在项目中使用import来加载scss
4、支持Karma + Mocha + Chai的测试架构，方便开发者写测试程序
5、支持Enzyme + Sinon，让你轻松写React组件的测试程序
6、支持代码覆盖报告
React方面支持如下特性：
1、Functional Component
const App = () => (
<div className='main-app'>
<h1>Hello, World!</h1>
</div>
);
2、Class Component
class App extends Component {
render() {
return (
<div className='main-app'>
<h1>Hello, World!</h1>
</div>
);
}
}
3、Class Properties
class Menu extends Component {
static propTypes = {
className: PropTypes.string,
};
...
}
4、Export Default
export default App;
测试方面支持如下特性：
1、Assert & Expect
import { assert, expect } from 'chai';
...
2、Enzyme
import { shallow } from 'enzyme';
describe('Testing', () => {
it('should render the App', () => {
const wrapper = shallow(<App />);
...
});
});
3、Sinon
const sandbox = sinon.sandbox.create();
describe('Testing', () => {
afterEach(() => sandbox.verifyAndRestore());
it('should call the callback', () => {
const callback = sandbox.stub();
...
});
});
代码覆盖报告例子：
=============== Coverage / Threshold summary ==============
Statements : 100% ( 46/46 ) Threshold : 90%, 4 ignored
Branches : 100% ( 31/31 ) Threshold : 90%, 13 ignored
Functions : 100% ( 10/10 ) Threshold : 90%
Lines : 100% ( 6/6 ) Threshold : 90%
===========================================================
生成的HTML和lcov格式报告会分别保存在html和lcov目录中，其中，lcov报告可以发送给coveralls.io。
使用起来非常方便，省去了架构项目花费的时间，把精力集中在React程序开发上。你只需要：
npm install
npm start
然后打开浏览器，登录http://localhost:5000，即可看到React程序。
支持的npm指令有：
使用ESLint进行代码质量检测：
npm run lint
使用Karma在PhantomJS上运行代码测试
npm run test
打包
npm run build
清除项目文件
npm run clean
具体特性和使用方法请参考github源码：https://github.com/jeantimex/react-webpack-boilerplate
平时我用Sublime来写React代码，自己写了一套Snippets来加快写代码的速度，如果你有兴趣，可以看看：React Development Snippets.
如果你有任何疑问，可以和我联系：jean.timex@gmail.com