React+Webpack+ES6环境搭建(自定义框架)

　　目前React前端框架是今年最火的。而基于React的React Native也迅速发展。React有其独特的组件化功能与JSX的新语法，帮助前端设计有了更好的设计与便捷，而React Native更是扩大了前端的边界。

　　说道React，那就不得不说一下Webpack凭借它异步加载和可分离打包等优秀的特性，走在取代Grunt和Gulp的路上。而面向未来的ES6，更是支持模块化处理。

　　下面我就分享一下关于Webpack+React+ES6的环境搭建（通用）【附加发布版】

准备工作

　　首先需要准备的就是WebStorm以及安装node.js，这里我给出自己云盘上的下载地址，亲测可用。对应的地址如下：

　　WebStorm：链接：http://pan.baidu.com/s/1o787Av4 密码：z176

　　node.js：链接：https://nodejs.org/en/ 官网

让我们跑起来

　　1、新建项目EChartDemo（我这里后续会使用一些相关的百度绘画组件，故以此命名，但这里只做框架构建，暂不引入百度绘画组件），更改文件-->设置 ES6环境，如图所示：

React+Webpack+ES6环境搭建(自定义框架)

　　2、添加package.json文件，输入npm init文件自动生成文件，如下：

{
  "name": "react-echart",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "description": "React+EChart百度绘图组件Demo",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/JaminHuang/EChartDemo.git"
  },
  "author": "JaminHuang",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/JaminHuang/EChartDemo/issues"
  },
  "homepage": "https://github.com/JaminHuang/EChartDemo#readme"
}

View Code