第一步:安装模块化包

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. idea本地运行JavaWeb项目

    1.需安装的软件有: JDK,当前版本jdk1.8 maven,当前版本3.2.1 mysql,mysql5.7 tomcat,tomcat9 git客户端,TortoiseGit-2.1.0.0-6 ...

  2. ajax的另一种成功和失败回调函数

    第一种: function engline(){ var oldmsg = $('#lineso').val() if(oldmsg == null || oldmsg == '' || oldmsg ...

  3. JVM 字节码(二)方法表详解

    JVM 字节码(二)方法表和属性表 上一节中对 ClassFile 的整体进行了五个详细的说明, 本节围绕 ClassFile 最重要的一个内容 - 方法表的 Code 属性展开 ,更多 JVM Me ...

  4. Python:每日一题002

    题目: 企业发放的奖金根据利润提成.利润(I)低于或等于10万元时,奖金可提10%:利润高于10万元,低于20万元时,低于10万元的部分按10%提成,高于10万元的部分,可提成7.5%:20万到40万 ...

  5. Oracle中为表设置自动增长的标识列

    -- Create sequence create sequence INNERID minvalue 1 maxvalue 99999999999999 start with 1 increment ...

  6. #10072. 「一本通 3.2 例 1」Sightseeing Trip(floyd求最小环+路径)

    https://loj.ac/problem/10072 针对无向图 因为Floyd是按照结点的顺序更新最短路的,所以我们在更新最短路之前先找到一个连接点k,当前的点k肯定不存在于已存在的最短路f[i ...

  7. jdk8中关于操作集合的一些新特性,遍历和排序操作

    jdk8增加了不少新的东西,在集合操作这块,就有如 lamda表达式,stream,sort,optional等新的类,主要涉及遍历和排序等方面,新特性提升了不少性能,我们开发就是要拥抱新事物,守着老 ...

  8. 请求转发(forward)和请求重定向(redirect)的区别(转)

    作者:@haimishasha本文为作者原创,转载请注明出处:https://www.cnblogs.com/haimishasha/p/5952129.html 用户向服务器发送了一次HTTP请求, ...

  9. 23.HashMap

    HashMap也是我们使用非常多的Collection,它是基于哈希表的 Map 接口的实现,以key-value的形式存在.在HashMap中,key-value总是会当做一个整体来处理,系统会根据 ...

  10. Hibernate3.0配置

    我的系统Win10(64x),Eclipse jee 2018-09 ,Sql2018版本. 以下是Hibernate3.0配置包 链接:https://pan.baidu.com/s/10Kizby ...