第一步:安装模块化包

cnpm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

第二步:安装成功后,在webpack.config.js文件找到module 然后在rules里面添加一个新的规则 代码如下

module: {
rules:[
//下面这部分是新添加的
{
test:/\.(jsx|js)/,
use:{
loader: 'babel-loader',
options:{
presets:[
"es2015","react"
]
}
},
exclude: /node_modules/
}
]
},

然后打包一下,就可以看到效果了。

使用webpack将es6 es7转换成es2015的更多相关文章

  1. 利用babel工具将es6语法转换成es5,Object.assign方法报错

    一.新建工程初始化项目 1.新建工程文件夹这里起名叫做es6,然后在里面创建两个文件夹分别为src .dist如下图:(src为待转换es6 js存放目录,dist为编译完成后的es5 js存放目录) ...

  2. webpack 兼容低版本浏览器,转换ES6 ES7语法

    ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆 ...

  3. es6/es7/es8常用新特性总结(超实用)

    本文标题有误导性,因为我其实想写node8的新特性,说实话一下子从node v1.x跳跃到node 8.x+ 真有点受宠若惊的感觉.一直觉得node 数组. 对象.序列等的处理没有python方便,因 ...

  4. webpack + react + es6, 并附上自己碰到的一些问题

    最近一直在学react,react的基础部分已经学得差不多了,然而自己并没有做详细的记录,有兴趣的同志可以参考阮一峰老师的教程,个人觉得挺不错的,链接如下:https://github.com/rua ...

  5. webpack+babel+ES6+react环境搭建

    webpack+babel+ES6+react环境搭建 步骤: 1 创建项目结构 注意: 先创建一个项目目录  react  这个名字自定义,然后进入到这个目录下面 mkdir app //创建app ...

  6. Webpack+React+ES6开发模式入门指南

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  7. webpack+react+es6开发模式

    一.前言 实习了两个月,把在公司用到的前端开发模式做个简单的整理.公司里前端开发模式webpack+react+redux+es6,这里去掉了redux. webpack, react, redux等 ...

  8. Webpack+React+ES6入门指南[转]

    React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...

  9. 'abc' 转换成[a, b, c]一道面试题的思考

    最近面试遇到那样一个问题把'abc' 转换成[a, b, c],就是字符串转成数组. 看着简单,我就是说split,然后面试官问还有吗.我有思考了一下.循环用charAt()取,然后还有Array.f ...

随机推荐

  1. mybatis进阶-5resultMap总结

    resultType: 作用: 将查询结果按照sql列名pojo属性名一致性映射到pojo中. 场合: 常见一些明细记录的展示,比如用户购买商品明细,将关联查询信息全部展示在页面时,此时可直接使用re ...

  2. android 平台 java和javascript 通信问题 A WebView method was called on thread 'JavaBridge'.

      java.lang.RuntimeException: java.lang.Throwable: A WebView method was called on thread 'JavaBridge ...

  3. redis使用规范文档 20170522版

    运维redis很久了,一直是口头给rd说各种要求,尝试把这些规范总结成文档 摘选一些可能比较通用的规则如下: 强制:所有的key设置过期时间(最长可设置过期时间10天,如有特殊要求,联系dba说明原因 ...

  4. python小结 1

    1.变量 记录状态 类型:数字,字符串,元组,列表,字典 可变不可变(内存地址不变的情况下,值能不能改变): 不可变:字符串,数字,元组 可变:列表,字典 访问顺序: 直接访问:数字 有序:字符串,列 ...

  5. 查看memcached进程

  6. Django手册

    Django教程 Python一直是我最喜欢的语言,在Django和Tornado之间我选择了前者,没有特别的原因,网上人云亦云的,肯定不会有一方离另一方差很远,我就直接去看了看Github上两个项目 ...

  7. Python实例浅谈之三Python与C/C++相互调用

    一.问题 Python模块和C/C++的动态库间相互调用在实际的应用中会有所涉及,在此作一总结. 二.Python调用C/C++ 1.Python调用C动态链接库 Python调用C库比较简单,不经过 ...

  8. 1024 Palindromic Number int_string转换 大整数相加

    A number that will be the same when it is written forwards or backwards is known as a Palindromic Nu ...

  9. 理解React组件的生命周期

    本文作者写作的时间较早,所以里面会出现很多的旧版ES5的时代的方法.不过,虽然如此并不影响读者理解组件的生命周期.反而是作者分为几种不同的触发机制来解释生命周期的各个方法,让读者更加容易理解涉及到的概 ...

  10. Java设计模式----中介者模式

    说到中介大家都不会陌生,买房子租房子有中介,出国留学有中介,买卖二手车还是有中介.那么中介到底是个什么角色呢?实际上,中介就是让买卖双方不必面对面直接交流,由他/她来完成买卖双方的交易,达到解耦买卖人 ...