引言

　　目前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. Mac 如何寻找Mac自带的IDLE

    Mac 如何寻找Mac自带的IDLE 每次要打开IDLE时,需要如下动作:打开terminal --> 输入idle --> 回车,就自动打开IDLE了 图标如下: 选择在“Finder中 ...

  2. Django中ORM之创建模型

    ORM 数据库与ORM映射关系 表名 --- 类名 字段 --- 属性 表记录 --- 类示例对象 创建表(建立模型) 模型建立如下 class Book(models.Model): title = ...

  3. 使用短信猫发送短信java代码

    短信猫简单配置:https://www.cnblogs.com/Big-Boss/p/9699880.html 发送短信: package utils; import org.smslib.AGate ...

  4. 省选模板_STL

    目录: 1. multiset 2. reverse 1.multiset namespace STL{ int main(){ multiset<int>::iterator s; mu ...

  5. css——外部样式

    外部样式 先建立一个css文件,如下: 然后开始写代码,不要加<style> 然后可以在html文件中的<head>内引用:<link rel="stylesh ...

  6. ES6 Symbol类型 附带:Proxy和Set

    七种数据类型 ·Symbol ·undefined ·null ·Boolean ·String ·Number ·Object let a = Symbol('this is a symbol'); ...

  7. 06 ASP.net

    ASP.net 第一天 理解浏览器与服务器概念,与WinForm的区别. C# IIS(Internet Information Service) 互联网信息服务 Java(Tomcat) Php(A ...

  8. rest-framework框架

    rest-framework框架是Django里面非常重要的框架,但提到rest-framework框架就不得不说两种请求方式,那就是CBV和FBV. FBV(function base views) ...

  9. BZOJ 2329/2209 [HNOI2011]括号修复 (splay)

    题目大意: 让你维护一个括号序列,支持 1.区间修改为同一种括号 2.区间内所有括号都反转 3.翻转整个区间,括号的方向不变 4.查询把某段区间变为合法的括号序列,至少需要修改多少次括号 给跪了,足足 ...

  10. Swoole WebSoctet 使用 zlib 压缩之 PHP 与 pako.js

    一些理论知识 先说一下deflate算法吧,deflate是zip压缩文件的默认算法, 其实deflate现在不光用在zip文件中, 在7z, xz等其他的压缩文件中都用, 实际上deflate只是一 ...