最新版安装与普通安装

使用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. 当input获取倒焦点的时候，获得输入内容

    描述:当用户点击输入框时,获取到他在input里输入的内容 $().keyup(function(){ $(this).val(); }) $(this).val()==this.value; $(t ...

  2. Jenkins插件获取git分支的方法

    1.旧版本的Jenkins可以使用Dynamic Choice Parameter插件: 使用方法: Jenkins--->dev-h5-server--->配置--->参数化构建过 ...

  3. java代码示例（3）

    /** * 需求分析:根据输入的天数是否是周六或是周日, * 并且天气的温度大于28摄氏度,则外出游泳,否则钓鱼 * @author chenyanlong * 日期:2017/10/14 */ pa ...

  4. LoadRunner进行参数化的九种方式取值和连接数据库取值

    一.连接mysql数据库取值 1.首先安装odbc驱动 链接: https://pan.baidu.com/s/1WAYd4ygQqIrbB08S01hSkg 提取码: gdfs 2.操作步骤如下图: ...

  5. X-UA-compatible浅谈

    最近了解到svg,原来它出现之前好几年,微软已经推出了vml,但是那时候却被人吐槽无数,看来过早的创新也是失败的原因之一呢~ 为什么谈到这个话题呢?因为IE史上有一个特别奇怪的浏览器IE8,它及不兼容 ...

  6. Vue.js 开发环境的搭建

    1. cnpm install vue-cli(安装vue 脚手架) 2. vue init webpack my-project(my-project:自定义,取一个项目的名字,init 初始化一个 ...

  7. SparkSQL和DataFrame

    SparkSQL和DataFrame SparkSQL简介 Spark SQL是Spark用来处理结构化数据的一个模块,它提供了一个编程抽象叫做DataFrame并且作为分布式SQL查询引擎的作用.它 ...

  8. A + B,末k位不相同

    题目描述 读入两个小于10000的正整数A和B,计算A+B.需要注意的是:如果A和B的末尾K(不超过8)位数字相同,请直接输出-1. 输入描述: 测试输入包含若干测试用例,每个测试用例占一行,格式为& ...

  9. CSS魔法（四）常用属性

    元素的显示与隐藏 display.visibility.overflow 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display.visibility 和 overflow ...

  10. leetCode- 472. Concatenated Words

    因为每个组合的字符串,至少要有3个index. 起点,中间拼接点,结点.所以可以将字符串分解为子字符串,判断子字符串是否存在.但是,后面字符串的存在必须要在前面字符串已经存在基础上判断. class ...