本项目已作废，替代项目为 React-Study，欢迎交流学习。

项目地址：webpack-es6-react

这是一个基础的，综合了webpack，es6，react的学习模板。

本模板也方便你对 react 生态圈中其他相关知识的学习，比如你想学习 react-router,redux 或是 css-modules都可以以此模板为基础进行延伸学习。

webpack-es6-react

本模板应用了以下技术

• React

• Babel 6

• Webpack 我们的构建工具

• Webpack Dev Server

• React Transform 可以让 React 组件局部自动实时更新（而不是刷新页面）

Demo

使用方法

git clone https://github.com/minooo/webpack-es6-react.git
cd webpack-es6-react 
npm install
npm start
打开 http://localhost:5000/

注意：package.json 的 scripts 中内置了三个命令
start 用于开发模式，方便调试，撸码
build 开发完毕后，就可以打包文件了，当然这个模板足够简单，不能应用于实际生产中，这里只是一个示范。
lint 检测你的js代码是否规范。

package.json 中的部分 包/库 说明

• babel-core babel6 的基础模块

• babel-eslint ESLint 是前端JS代码检测利器。而 babel-eslint 则允许你检测所有的 Babel 代码。

• babel-loader 这个包允许你使用 Babel 和 webpack 转译（Transpiling） JavaScript 文件。

• babel-plugin-react-transform 这个插件通过任意转换的方式去封装 React 组件。换句话说，你可以随心所欲的摆弄你的组件了。

• babel-plugin-transform-runtime 在 Babel 转换过程中，详细的展示引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局。

• babel-preset-es2015 此预设包含了所有的 es2015 插件。

• babel-preset-react 此预设包含了所有的 React 插件。

• babel-preset-stage-0 此预设包含了 stage 0 中的所有插件。

• eslint JavaScript 语法检测利器：分析出你代码潜在的错误和非标准用法。

• eslint-plugin-react ESLint 中关于 React 语法检测的插件。

• react-transform-hmr 一个 React 转换装置，该装置通过引用 Hot Module Replacement API 使热重载 React 的类成为可能。

• react-transform-catch-errors 呈现你 React 组件的错误信息。

• webpack-dev-server 为 wepack app 提供一个服务器，如果你的代码有任何变化，浏览器将自动刷新显示，极大的方便前期开发。

• babel-runtime Babel 自带的运行环境。

根目录下部分文件说明

• .babelrc : 什么是 .babelrc 文件呢？熟悉 linux 的同学一定知道，rc 结尾的文件通常代表运行时自动加载的文件，配置等。同样在这里也是有同样作用的。里面的 env 字段，可以对 BABEL_ENV 或 NODE_ENV 指定不同的环境变量，进行不同编译。

• eslintignore 通知 eslint 忽略那些不应该被检测的文件。

• eslintrc eslint 配置文件，使 JavaScript 代码规范化，标准化书写。

为什么要做这个模板

react 现在已经不能简单的说是一个库了，而是一个生态系统。围绕其出现的新技术层出不穷，而 babel 的出现让我们提前用上了下一代 javascript——es6， 作为前端的我们势必要紧随时代潮流。