Webpack4 学习笔记三 ES6+语法降级为ES5
前言
此内容是个人学习笔记,以便日后翻阅。非教程,如有错误还请指出
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的更多相关文章
- VUE 学习笔记 三 模板语法
1.插值 a.文本 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {{ msg }}</span> v-once ...
- ES6学习笔记<三> 生成器函数与yield
为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
- Typescript 学习笔记三:函数
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- 学习笔记(三)--->《Java 8编程官方参考教程(第9版).pdf》:第十章到十二章学习笔记
回到顶部 注:本文声明事项. 本博文整理者:刘军 本博文出自于: <Java8 编程官方参考教程>一书 声明:1:转载请标注出处.本文不得作为商业活动.若有违本之,则本人不负法律责任.违法 ...
- python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样
python3.4学习笔记(一) 基本语法 python3不向下兼容,有些语法跟python2.x不一样,IDLE shell编辑器,快捷键:ALT+p,上一个历史输入内容,ALT+n 下一个历史输入 ...
- ASP.NET MVC 学习笔记-2.Razor语法 ASP.NET MVC 学习笔记-1.ASP.NET MVC 基础 反射的具体应用 策略模式的具体应用 责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用 C#读取XML文件的基类实现
ASP.NET MVC 学习笔记-2.Razor语法 1. 表达式 表达式必须跟在“@”符号之后, 2. 代码块 代码块必须位于“@{}”中,并且每行代码必须以“: ...
- 基于.net的分布式系统限流组件 C# DataGridView绑定List对象时,利用BindingList来实现增删查改 .net中ThreadPool与Task的认识总结 C# 排序技术研究与对比 基于.net的通用内存缓存模型组件 Scala学习笔记:重要语法特性
基于.net的分布式系统限流组件 在互联网应用中,流量洪峰是常有的事情.在应对流量洪峰时,通用的处理模式一般有排队.限流,这样可以非常直接有效的保护系统,防止系统被打爆.另外,通过限流技术手段,可 ...
随机推荐
- IO流等学习笔记
1.为什么日期的开始是从1970年0101开始记录,计算机的日期记录是现在的时间距1970年的时间,可正可负.? 2.引用类型默认都为null,基本数据类型为0,除基本数据类型外所有的都为引用数据类型 ...
- Python 元组 (tuple)
作者博文地址:https://www.cnblogs.com/liu-shuai/ Python的元组与列表类似,同样可通过索引访问,支持异构,任意嵌套.不同之处在于元组的元素不能修改.元组使用小括号 ...
- MATLAB基本概念和变量
基本概念 1.x=int8(129)=>x=127 (带符号8位整数,最大值为127) x=uint8(129)=>x=129 (无符号型,最大值为255) 2.class函数得 ...
- Ubuntu上的相关问题
一.解决Ubuntu中vi命令的编辑模式下不能正常使用方向键和退格键的问题 在Ubuntu中,进入vi命令的编辑模式,发现按方向键不能移动光标,而是会输出ABCD,以及退格键也不能正常删除字符.这是由 ...
- #include stdio.h(7)
#include <stdio.h> int main() { //***********一.循环语句*************** //什么叫做循环: //重复的做某件事情,重复的执行一 ...
- Android @1x,@2x,@3x 资源文件自动分包工具
version 1.2 1.修改不用输入扩展名 2.输出路径可选.默认会在输入路径下建文件夹 前沿: 现在开发中ios,android会使用一套图,但是ui设计师给的图命名是以@1x,@2x,@3x这 ...
- AOSP 源码整编单编
<AOSP 源码下载>完成后,就可以开编了. 整编 整编,顾名思义就是编译整个 Android 源码,最终 out 目录会生成几个重要的镜像文件,其中有 system.img.userda ...
- Android - 开发页面需了解的dip,sp,px知识,以及它们的转换
工作中,时常会有任务要求开发新页面,这时一般的流程是产品经理确定要开发的页面和功能,然后设计师提供设计稿,之后由我们开发人员完成开发工作. 通常,设计师提供的设计稿尺寸标注会很详细,例如涉及到字时,字 ...
- iptable防范ddos攻击
Basic DoS Protection https://github.com/MPOS/php-mpos/wiki/Basic-DoS-Protection # Rule 1: Limit New ...
- Spring Cloud入门程序
本文手把手教你,做出第一个Spring Cloud程序,Eureka的简单入门使用 1.创建Spring Starter Project工程 点击next,添加项目名 2.引入Spring Cloud ...