引言

　　目前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"

}

　　3、生成文件后，添加server.js（服务入口文件）、webpack.config.js（配置文件）、webpack.production.config.js（发布版配置文件），再进行修改对应的Scripts，用于修改启动和发布。

"scripts": {

    "start": "node server.js",

    "prod": "webpack --config webpack.production.config.js"

  }

　　4、新建入口文件index.html，以及相关代码框架，如下所示

　　|--src

　　|----containers

　　|------index.js　　组件处理主文件

　　|------root.js　　  地址跳转配置文件

　　|----service

　　|------index.js　　服务请求主文件　

　　|------request.js　服务请求文件

　　|----index.js　　  主入口文件

　　|--index.html　　页面入口文件

　　|--package.json　项目信息与安装配置文件

　　|--server.js　　　 服务端口入口文件

　　|--webpack.config.js　　配置文件

　　|--webpack.production.config.js　　（发布版）配置文件

　　5、需要安装的包，详情请看package.json，如下：

"dependencies": {

    "echarts": "^3.2.3",

    "isomorphic-fetch": "^2.2.1",

    "lodash": "^4.15.0",

    "react": "^15.3.1",

    "react-dom": "^15.3.1",

    "react-router": "^2.8.0"

  },

  "devDependencies": {

    "babel-core": "^6.14.0",

    "babel-loader": "^6.2.5",

    "babel-polyfill": "^6.13.0",

    "babel-preset-latest": "^6.14.0",

    "babel-preset-react": "^6.11.1",

    "open": "0.0.5",

    "react-hot-loader": "^1.3.0",

    "webpack": "^1.13.2",

    "webpack-dev-server": "^1.15.1"

  }

　　6、新建.babelrc(babel配置文件)，重要

{

  "presets":["react","latest"]

}

具体内容的添加配置

　　1、index.html配置

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="wrapper"></div>

<script src="./public/bundle.js" type="text/javascript"></script>

</body>

</html>

　　2、server.js配置

'use strict';

var open = require('open');

var webpack =require('webpack');

var WebpackDevServer = require('webpack-dev-server');

var config = require('./webpack.config.js');

var compiler = webpack(config);

var server = new WebpackDevServer(compiler, {

    publicPath:config.output.publicPath,

    hot:true,

    historyApiFallback: true,

    quiet: false,

    noInfo: false,

    filename: "index.js",

    watchOptions: {

        aggregateTimeout: 300,

        poll: 1000

    },

    headers: {"X-Custom-Header": "yes"},

    stats: {colors: true}

});

server.listen(3010, function (err, result) {

    if (err)console.log(err);

    open('http://localhost:3010');

});

　　3、webpack.config.js配置

'use strict';

var path = require('path');

var webpack = require('webpack');

var config = {

    devtool: 'source-map',

    entry: {

        app: ['webpack-dev-server/client?http://localhost:3010', 'webpack/hot/dev-server', './src/index']

    },

    output: {

        path: path.join(__dirname, 'public'),

        publicPath: '/public/',

        //chunkFilename: '[id].chunk.js',

        filename: "bundle.js"

    },

    module: {

        loaders: [

            {test: /\.js$/, loaders: ['react-hot', 'babel'], include: [path.join(__dirname, 'src')]}

        ]

    },

    plugins: [

        new webpack.HotModuleReplacementPlugin(),

        //new webpack.optimize.CommonsChunkPlugin('shared.js'),

        new webpack.DefinePlugin({

            'process.env': {

                'DEBUG': true

            }

        })

    ]

};

module.exports = config;

　　4、webpack.production.config.js配置

/**

 * 创建时间：2016年9月19日 10:45:57

 * 创建人：JaminHuang

 * 描述：配置文件（发布版）

 */

'use strict';

var path = require('path');

var webpack = require('webpack');

module.exports = {

    devtool: false,

    debug: false,

    stats: {

        colors: true,

        reasons: false

    },

    entry: './src/index',

    output: {

        path: path.join(__dirname, 'public'),

        publicPath: '/public/',

        //chunkFilename: '[id].chunk.js',

        filename: 'bundle.js'

    },

    plugins: [

        new webpack.optimize.DedupePlugin(),

        new webpack.DefinePlugin({

            'process.env': {

                'NODE_ENV': JSON.stringify('production'),

                'DEBUG': false

            }

        }),

        //new webpack.optimize.CommonsChunkPlugin('shared.js'),

        new webpack.optimize.UglifyJsPlugin({

            compressor: {

                warnings: false

            }

        }),

        new webpack.optimize.OccurenceOrderPlugin(),

        new webpack.optimize.AggressiveMergingPlugin(),

        new webpack.NoErrorsPlugin()

    ],

    module: {

        loaders: [

            {test: /\.js$/, loader: "babel", exclude: /node_modules/}

        ]

    }

};

　　5、src文件下的主入口文件配置

'use strict';

import React from 'react';

import ReactDOM from 'react-dom';

import { browserHistory, Router } from 'react-router'

import routes from './containers/root';

import 'babel-polyfill';

ReactDOM.render(<Router history={browserHistory} routes={routes}/>, document.getElementById('wrapper'));

　　6、service文件（请求服务，如果没有调用其他API接口则不用创建）下的相关配置

　　　　6.1　　index.js

'use strict';

import * as Request from './request';

export {

    Request

}

　　　　6.2　　request.js

'use strict';

import fetch from 'isomorphic-fetch';

const baseUrl = "http://xxx";

export function FetchPost(url, data) {

    return fetch(`${baseUrl}/${url}`, {

        headers: {"Content-Type": "application/json"},

        method: 'POST',

        body: JSON.stringify(data)

    }).then(response=> {

        return response.json();

    })

}

　　7、containers文件（组件包）下的相关配置

　　　　7.1　　index.js

'use strict';

import React,{ Component } from 'react';

import { Link } from 'react-router';

class Container extends Component {

    render() {

        const { children } = this.props;

        return (<div>{children}这里是首页</div>)

    }

}

export default Container;

　　　　7.2　　root.js

'use strict';

import Index from './';

export default {

    component: Index,

    path: '/'

}

后记

　　至此，所有配置全部都已经完成了，如果想运行查看则只要输入”npm start“就可以调试查看啦~如果想发布则输入”npm prod“就行了。

　　附上Demo源代码地址：如果感觉可以的话，请给个Star哦~

　　地址：https://github.com/JaminHuang/EChartDemo

React+Webpack+ES6环境搭建(自定义框架)的更多相关文章

  1. react+webpack+babel环境搭建

    [react+webpack+babel环境搭建] 1.react官方文档推荐使用 babel-preset-react.babel-preset-es2015 两个perset. Babel官方文档 ...

  2. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  3. typescript+react+antd基础环境搭建

    typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接 这里module moduleResolution的配置都会影 ...

  4. React Native的环境搭建以及开发的IDE

    (一)前言 前面的课程我们已经对React Native的环境搭建以及开发的IDE做了相关的讲解,今天我们的主要讲解的是应用设备运行(Running)以及调试方法(Debugging).本节的前提条件 ...

  5. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

  6. scss + react + webpack + es6

    scss + react + webpack + es6 写在前面: 刚学习完慕课网里的一个幻灯片案例,自己加了刚学的react,两者结合.首先让大家看看效果 点击此处 你可以先用纯js实现上面的效果 ...

  7. 【WebGIS系列】Typescript+WebGL+Webpack开发环境搭建

    目前Web实现矢量渲染的主流技术包括SVG.VML和WebGL.相对而言,VML是一种较古老的技术,虽然未成为W3C标准,但被早期的IE浏览器(IE9以下)和微软Office广泛使用,目前已经远离了浏 ...

  8. react介绍、环境搭建、demo运行实例

    React官网:https://reactjs.org/docs/create-a-new-react-app.html cnpm网址:http://npm.taobao.org/ 1.react介绍 ...

  9. Android React Native 开发环境搭建---windows下

    环境搭建 环境搭建可以参考RN官网,也可以参考中文版本:http://reactnative.cn/docs/0.45/getting-started.html 如果你希望可以看到原版的安装流程,可以 ...

随机推荐

  1. Unity局部坐标系与世界坐标系的区别

    局部坐标旋转是指以父物体为参考,进行旋转. 而世界坐标系以"坐标陀螺"来进行旋转. 类似的情况例如: 东.南.西.北.是世界坐标系. 前.后.左.右是局部坐标系

  2. JS判断客户端是否是iOS或者Android或者ipad（二）

    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...

  3. day09-1 列表，元祖的内置方法

    目录 列表类型的内置方法 作用 定义方式 方法 优先掌握 需要掌握 储存一个值or多个值 有序or无序?(有序:有索引, 无序:无索引) 可变or不可变(可变:值变id不变,不可变:值变id也变) 元 ...

  4. Eclipse中重置（还原）GIT分支

    重置(还原)GIT分支: 1.  右击项目——Team——Reset…: 2.  在弹出的Reset框中选择要重置(还原)的分支——Reset,即可完成.

  5. Eclipse本地创建新的GIT分支，并推送至远程Git分支

    本地创建新的GIT分支: 1.右击要创建新分支的项目——Team——Switch To——New Branch…: 2.在弹出的对话框中name框中输入要创建的分支名称,(如果是当前显示的要拷贝的分支 ...

  6. zabbix-agent端自定义监控项（free -m)服务器内存使用率

    Agent端操作 [root@agent ~]# vim /usr/local/zabbix/etc/zabbix_agentd.conf 末行追加 UserParameter=memory_user ...

  7. luogu P3391 【模板】文艺平衡树（Splay） 非旋转treap

    Code: #include<bits/stdc++.h> using namespace std; void setIO(string s) { string in=s+".i ...

  8. [luogu2592 ZJOI2008] 生日聚会 (计数dp)

    题目描述 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: 对于任意连续 ...

  9. Proxychains安装

    没有管理员权限 1.建立文件夹proxychains,并进入下载 mkdir proxychains cd proxychains wget https://sourceforge.net/proje ...

  10. VUE：路由

    VUE:路由 一.说明 1)官方提供的用来实现SPA的vue插件 2)github:https://github.com/vuejs/vue-router 3)中文文档:http://router.v ...