前言

此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出

Webpack 将es6、es7语法降级为es5

需要通过 babel JavaScript编译器。

安装: npm i babel-loader、@babel/core、@babel/preset-env

plugins:
@babel/plugin-proposal-decorators --save-dev
@babel/plugin-proposal-class-properties --save-dev
@babel/plugin-transform-runtime: 它允许重新使用Babel注入的帮助程序代码来保存代码大小 --save-dev
@babel/runtime 这个要安装依赖到生产环境, 避免编译输出之间的重复 --save

如果你使用更高级的 ES6语法, 如 装饰器 @autobind、类的修饰,方法的修饰,使用新的写法定义类的属性
都配置在 loader: '@bable-loader'的options中

class N {
  name = qiqingfu;
  @autobind
  sayName() {
    console.log(this.name)
  }
}

const n = N()
n.name // qiqingfu
let { sayName } = n
sayName() // 1  修饰器@autobind  强制调用此函数以使其始终引用类实例

webpack配置:

module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            // babel-loader的一些配置选项
            options: {
              presets: [
                '@babel/preset-env'   // 将es6转换为 es5
              ],
              plugins: [
                ["@babel/plugin-proposal-decorators", { "legacy": true }],
                ["@babel/plugin-proposal-class-properties", { "loose" : true }]
                ["@babel/transform-runtime"]
              ]
            }
          }
        ]
      },
      {
        // eslint
        test: /\.js$/,
      }
    ]
  }
}

可以配置多个loader,下面 /.js$/可以再配置 eslint, loader的执行顺序是自左向右,自下到上。所以需要先

ESLint

可组装的 JavaScript和JSX检查工具, 提供一个插件化的 JavaScript 代码检查工具。

Babel

Babel是一个工具链, 主要用于在旧的浏览器或环境中将 ECMAScript 2015+代码转换为向后兼容版本的。

  • Plugins
  • Presets

Plugins: 代码转换以插件的形式出现, 插件是小型的 JavaScript 程序, 它指示 Babel 如果对代码进行转换。

Presets: 如果想要转换代码中还有其它 ES2015+ 功能。可以使用 preset来代替预先设定的一组插件,
而不是逐一添加我们要想的插件。

笔记地址

Webpack4 学习笔记三 ES6+语法降级为ES5的更多相关文章

  1. VUE 学习笔记 三 模板语法

    1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...

  2. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  3. Oracle学习笔记三 SQL命令

    SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)  

  4. java之jvm学习笔记三(Class文件检验器)

    java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...

  5. Typescript 学习笔记三:函数

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. 学习笔记(三)--->《Java 8编程官方参考教程(第9版).pdf》:第十章到十二章学习笔记

    回到顶部 注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法 ...

  7. python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样

    python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样,IDLE shell编辑器,快捷键:ALT+p,上一个历史输入内容,ALT+n 下一个历史输入 ...

  8. ASP.NET MVC 学习笔记-2.Razor语法 ASP.NET MVC 学习笔记-1.ASP.NET MVC 基础 反射的具体应用 策略模式的具体应用 责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用 C#读取XML文件的基类实现

    ASP.NET MVC 学习笔记-2.Razor语法   1.         表达式 表达式必须跟在“@”符号之后, 2.         代码块 代码块必须位于“@{}”中,并且每行代码必须以“: ...

  9. 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时,利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记:重要语法特性

    基于.net的分布式系统限流组件   在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...

随机推荐

  1. [inner] bug

    这样正确 command: ["sh", "-c", "mysql -h${DC_DB_HOST} -uroot -p${MYSQL_ROOT_PAS ...

  2. UGUI [TextArea]

  3. Java Executors小结

    一 Executors提供了一系列工厂方法用于创先线程池ThreadPoolExecutor线程池的具体实现类,一般用的各种线程池都是基于这个类实现的 返回的线程池都实现了ExecutorServic ...

  4. webConfig中<customErrors>节点配置

    发布在远程计算机上的网站调试问题: 通常情况下我们会设置错误页,不让用户看到错误信息 这种WebConfig的配置方法是: <configuration> <system.web&g ...

  5. CSS的相对定位和绝对定位(position)

    什么是定位呢? 定位(position),故名思议,就是确定元素在页面中的位置. CSS的常用定位有两种,一种是相对定位,一种是绝对定位. 下面我们看例子 <html> <head& ...

  6. Android修改AlertDialog宽和高以及设置AlertDialog的背景

    不知道你们试过了吗,AlertDialog在我们给他设置我们自己的布局的时候他的宽度不论我们怎么设置他都是不变的,要想改变宽和高我们可以动态的去修改他的宽度好高度 直接上代码 // 1. 布局文件转换 ...

  7. 2013应届毕业生各大IT公司待遇整理汇总篇(转)

    不管是应届毕业生还是职场中人,在找工作时都必然会对待遇十分关注,而通常都是面试到最后几轮才知道公司给出的待遇.如果我们事先就了解大概行情,那么就会在面试之前进行比较,筛选出几个心仪的公司,这样才能集中 ...

  8. python 输出奇偶数并排序

    random_numbers = [] for i in range(40): random_numbers.append(random.randint(1, 100)) num1 = [] num2 ...

  9. Python扩展包

    Python扩展包 1.NumPy NumPy提供了多种python本身不支持的多种集合,有list.ndarray和ufunc. list 更加灵活的数组,支持多维,数据可不同型,存储数量远大于ar ...

  10. JavaScript 常用的Math对象

    Math.ceil(x); //返回x向上取整后的整数值. Math.floor(x); //返回x向下取整后的整数值.. Math.round(x); //返回四舍五入后的整数. Math.abs( ...