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环境，如图所示：

　　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

查看更多关于React+Webpack+ES6环境搭建(自定义框架)的详细内容...