最新版安装与普通安装

使用babel-loader编译ES6,需要遵循规范，安装babel-presets

规范列表

对应babel-loader，babel-preset安装最新版和普通版：

presets算是loader的参数，如何指定参数？

babel-presets也有一个参数就是targets,这个参数告诉babel当你编译时，根据你指定的targets选择哪些语法编译，哪些语法不编译

可以看出下图的includes方法和set都没有编译，这是因为一些低版本浏览器中不存在

babel-presets针对编译的是语法，要想使得这些函数与方法也被编译，就要用到babel的两个插件

1.babel ployfilll

2.babel runtime transform

局部垫片使用，新建.babelrc文件：

webpack.config.js改成：

由于babel-runtime不是最新版本重新安装

前端工程化-webpack(babel编译ES6）的更多相关文章

  1. 使用webpack+babel构建ES6语法运行环境

    1.前言 由于ES6语法在各个浏览器上支持的情况各不相同,有的浏览器对ES6语法支持度较高,而有的浏览器支持较低,所以为了能够兼容大多数浏览器,我们在使用ES6语法时需要使用babel编译器将代码中的 ...

  2. webpack如何编译ES6打包

    前言:随着ES的普及我们越来越多的开始使用ES6的语法了,当然也随着mvvm框架的流行少不了js模块化,那js模块化又有那些呢 在很早的时候大家都用的命名空间,现在也有人用(库名.类别名.方法名) 后 ...

  3. 使用babel编译es6

    起因:开发中慢慢的学习使用es6,但是JavaScript需要浏览器来解析,而不是所有浏览器都支持es6,所以为了兼容es6,需要第三方工具进行编译es6. 工具:node,gulp,gulp-bab ...

  4. 前端工程化 Webpack基础

    前端工程化 模块化 (js模块化,css模块化,其他资源模块化) 组件化 (复用现有的UI结构.样式.行为) 规范化 (目录结构的划分.编码规范化.接口规范化.文档规范化.Git分支管理) 自动化 ( ...

  5. 在IDEA(phpStorm)中使用Babel编译ES6

    安装Babel 官方文档建议我们根据单个项目进行本地安装,原因是不同的项目可以依赖不同版本的 Babel,使你的项目更方便移植.更易于安装. 在项目的根目录下使用命令行工具(CMD等)执行下面代码 n ...

  6. 前端工程化-webpack篇之babel-polyfill与babel-runtime（三）

    关于 Babel 如果我们没有配置一些规则,Babel 默认只转换新的 JavaScript 句法(syntax),而不转换新的 API,比如 Iterator.Generator.Set.Maps. ...

  7. 前端工程化webpack（一）

    webpack 的基本用法   1.app.js 引入模块 import moduleLog from './module.js' //引入moduleLog从./module.js 2.module ...

  8. 前端工程化-webpack（打包JS）(二)

    一.第一种打包方式 webpack entry<entry> output 假设目录结构如下: index.html是入口文件 打包app.js为bundle.js如下 app.js 当使 ...

  9. 前端工程化-webpack简介(一)

    本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependenc ...

随机推荐

  1. 20181114 Redis

    Redis 下载 Windows版本 Windows版本 已经有很久没有更新了,建议还是使用Linux版本 Linux版本 官网下载即可 配置文件 Windows版本 redis.windows.co ...

  2. 函数和常用模块【day04】：内置函数（八）

    一.常用内置函数 1.表格 二.内置函数详情(1-10) 1.abs(x) 功能:取数的绝对值 1 2 >>> abs(-1)  #取-1的绝对值 1 2.all(iterable) ...

  3. jedis实现操纵redis的常用api及使用场景

    简单记录一下,和描述一下常用的业务场景.好记性不如烂笔头. pom.xml <!--整合redis--> <dependency> <groupId>redis.c ...

  4. Study 2 —— 图片热点区域

    标记<map>和<area><img src="图片" usemap="#名称"><map id="#名称& ...

  5. UVALive - 7147 （数学）

    题目链接 题意 n只队伍,两两之间会进行比赛,赢平输都有相应得分,所有比赛结束后,前m名可以晋级.问最大的不能晋级分数为多少,以及最小的能晋级的分数. 分析 智商题...按照要求来贪心1.没有晋级的队 ...

  6. android kotlin Gradle DSL method not found: '1.2.51()'错误，be using a version of the Android Gradle plug-in that does not contain the method (e.g. 'testCompile' was added in 1.1.0).

    同步的时候遇到这个问题,从log上看是因为gradle的版本不包含kotlin 1.2.51这个method,具体原因我也不是很清楚,大概猜测是kotlin版本的问题,而最新的版本就是1.2.51,所 ...

  7. android allowbackup

    allowbackup 属性是在application 节点下,作用的设置为true,人们可以通过adb 命令备份一份应用的信息,然后在另外一个设备上,还原这份信息,是一种危险操作,所以,我们一般设为 ...

  8. 词典的实现(4)-使用Hash方式来实现词典

    1,实现思路 public class HashedDictionary<K, V> implements DictionaryInterface<K, V>, Seriali ...

  9. EventKey为last_trade_no的subscribe关注事件

    如果用户曾经在该公众号有支付行为,关注的时候EventKey中将包含上次交易订单号,如 last_trade_no_4002752001201704258347703919 <xml> & ...

  10. Tukey‘s test方法 异常值

    如何计算异常值 异常值就是和其他样本数据有显著差异的值.这个词在统计学中经常用到,可以表示数据异常或测量错误.明白算异常值的方法,对于正确理解数据非常有用,而且会引出更精确的结论.以下介绍一个很简单的 ...