文档章节

React 【ES2015】+ Babel + Gulp + Webpack

我是李达康
 我是李达康
发布于 2016/02/16 14:41
字数 148
阅读 19
收藏 0
点赞 1
评论 0

React 【ES2015】+ Babel + Gulp + Webpack

var webpack = require("webpack");
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin("common.js");

module.exports = {
	entry: {//入口文件
		routes:"./src/routes.js"
	},
	output: {//打包输出
		path:__dirname,
		filename:"[name].entry.js"
	},
	resolve: {//定义模块路径
		extensions:['','.js','jsx']
	},
	externals: {
      'React': 'window.React'
    },
	module: {//处理模块
		loaders:[{
			test:/\.js$/,
			loader:'babel-loader',
			query:{
				presets:['es2015', 'react']
			}
		}, {
			test:/\.jsx$/,
			loader:'babel-loader',
			query:{
				presets:['es2015', 'react']
			}
		}]
	},
	plugins:[commonsPlugin]
};

package.json

{
  "name": "cnode.js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "jso0",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.5.2",
    "babel-loader": "^6.2.2",
    "bootstrap": "^3.3.6",
    "gulp": "^3.9.1",
    "gulp-webpack": "^1.5.0",
    "localStorage": "^1.0.3",
    "react": "^0.14.7",
    "react-bootstrap": "^0.28.3",
    "react-dom": "^0.14.7",
    "react-router": "^2.0.0",
    "webpack": "^1.12.13"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.5.0",
    "babel-preset-react": "^6.5.0"
  }
}

 

 

 

参考:

babel 为什么没能识别我 js 文件中的 jsx 语法?

 

 

 

© 著作权归作者所有

共有 人打赏支持
我是李达康
粉丝 31
博文 36
码字总数 25467
作品 0
济南
程序员
gulp与webpack-stream集成配置

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢?这篇文章就是讲述如何集成gulp和webpack 1.安装webpack-stream 很重要的插件,当然也...

WolfX ⋅ 2016/05/12 ⋅ 1

零React基础入门Amaze UI Touch!

本文摘自Amaze UI官方社区,作者:老配。 全文的目的是达成使用amazeui-touch进行项目开发,并且以我这个前端菜鸟所见所学来归纳整理。文章不对详细内容做讲解。 环境安装与前期准备 我的基础...

云适配 ⋅ 2016/07/27 ⋅ 2

React本地开发环境​--React-Dev

React-Dev基于webpack(打包)&gulp(工作流)&koa(数据mock)的本地开发环境。 执行命令: 启用带有功能的本地服务开发环境 启用不带功能的本地服务开发环境 启用带有功能的本地服务开发环境(不...

王向众 ⋅ 2016/03/23 ⋅ 0

react-router入门

如果您已经入门reactjs,请绕道~ 这篇博客只适合初学者,初学reactjs的时候,如果你不会webpack,相信很多人都会被官方的例子绕的晕头转向。 ES6的例子也会搞死一批入门者。之前一直用的gulp,...

馒头 ⋅ 2016/03/08 ⋅ 0

一张图掌握移动Web前端所有技术(大前端、工程化、预编译、自动化)

你要的移动web前端都在这里! 大前端方向:移动Web前端、Native客户端、Node.js、 大前端框架:React、Vue.js、Koa 跨终端技术:HTML 5、CSS 3、JavaScript 跨平台框架:React Native、Cordo...

woIwoI ⋅ 2017/09/18 ⋅ 0

几个前端自动化工具(一)bower,grunt,gulp,jspm,karmam,webpack

前端有很多包管理工具,除了常见的webpack外还有bower,grunt,gulp,jspm,karma,这里就走马观花的都测试一遍 1 Bower https://bower.io/ 使用方法: 安装bower:npm install bower 使用b...

王小明123 ⋅ 2016/08/01 ⋅ 0

ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑 ⋅ 2017/12/18 ⋅ 0

使用webpack前端重构感受

重构起点 在一个老项目中用webpack对前端代码进行重构,重构的重心在于JS部分。这个老项目呢,有2年以上的历史了。 JS部分从底数起: Mootools - core/more 1.5.0 jQuery - 1.11.1 underscor...

曾建凯 ⋅ 2016/05/18 ⋅ 2

以react为核心的企业级前端架构

导语: 我们正处在一个技术大爆发时代,IT技术作为与人们生活息息相关的领域,得到了飞速发展。前端技术,又是所有IT技术中,更新最快的领域之一,考虑到前端社区“激进 ”的创新风气,似乎也...

IT_小翼 ⋅ 2016/04/08 ⋅ 0

Tool系列—Babel

1、简单介绍 这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码,并且可以确保良好地运行在所有主流 JavaSc...

龙马行空 ⋅ 2015/11/20 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

HiSDP —— 高效的C++软件开发平台

目前阿里集团每天有近1000PB的数据是通过LogAgent采集的,为了让LogAgent做到资源占用节省和高效采集,背后是基于HiSDP去构建的。 缘由 当决定采用C++编程语言去开发一个软件时,紧接着所面临...

阿里云云栖社区 ⋅ 18分钟前 ⋅ 0

zookeeper-3.4.12 下载与安装教程

一、zookeeper下载地址 http://mirrors.hust.edu.cn/apache/zookeeper/ 二、启动教程 把压缩包放在指定目录下 第三: 进入 conf文件夹底下 zoo_sample.cfg 文件名改成 zoo.cfg 第四步: 进入b...

泉天下 ⋅ 19分钟前 ⋅ 0

Oracle 中文日期转换

SELECT TO_date('2011年11月11日', 'yy"年"mm"月"dd"日"') FROM DUAL; 1. Oracle无法识别中文格式,所以添加双引号。 2. 后面的格式是指字符串在转换前的格式,而不是指转换后的格式。...

江戸川 ⋅ 20分钟前 ⋅ 0

MySell:API Spring Boot

起步 类目 商品 订单

BeanHo ⋅ 23分钟前 ⋅ 0

Spring方法拦截器MethodInterceptor

参考资料 1、Spring方法拦截器MethodInterceptor 2、Sharding JDBC源码分析-JdbcMethodInvocation类的作用

哎小艾 ⋅ 26分钟前 ⋅ 0

正则表达式

元字符 元字符,又叫字符集,就是用一些特殊符号表示特定种类的字符或位置。 匹配字符 . 匹配除换行符以外的任意字符 \w 匹配字母或数字或下划线或汉字 \s 匹配任意的空白符 \d 匹配数字 匹配...

wangchen1999 ⋅ 26分钟前 ⋅ 0

数据库数据导入Elasticsearch案例分享

基于bboss持久层和bboss elasticsearch客户端实现数据库数据导入es案例分享(支持各种数据库和各种es版本) 1.案例对应的源码 https://gitee.com/bboss/bboss-elastic/blob/master/bboss-el...

bboss ⋅ 27分钟前 ⋅ 0

动手---sbt(2)

参考 https://blog.csdn.net/leishangwen/article/details/46225587 建立一个chisel_max目录,文件内容如后面所述,现在开始执行命令: joe@joe-Aspire-Z3730:/media/sdb4/download/scala$ c......

whoisliang ⋅ 33分钟前 ⋅ 0

纯js实现最简单的文件上传(后台使用MultipartFile)

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> //图片上传 var xhr......

孟飞阳 ⋅ 38分钟前 ⋅ 0

iOS宇宙大战游戏、调试工具、各种动画、AR相册、相机图片编辑等源码

iOS精选源码 日期时间选择器,swift Space Battle 宇宙大战 SpriteKit游戏源码 LLDebugTool - 便捷的IOS调试工具(新增截屏功能) 相机扫描or长按识别二维码、FMDB、键盘动态高度、定位等 动画...

sunnyaigd ⋅ 39分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部