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来代替预先设定的一组插件,
而不是逐一添加我们要想的插件。
笔记地址
最新文章
- Java内存与垃圾回收调优
- MEF入门之不求甚解,但力求简单能讲明白(三)
- JavaScript String(字符串)对象 实例
- 更新java对xml文件的操作
- thinkPHP 接支付宝及时到账接口
- Angular学习(3)- 双向梆定
- c++ ip地址相关
- ava中拦截器 过滤器 监听器都有什么区别
- PCB设计备忘录
- Android 应用程序启动过程源代码分析
- 五、pig学习
- 读入一个自然数n,计算其各位数字之和,用汉语拼音写出和的每一位数字。 输入格式:每个测试输入包含1个测试用例,即给出自然数n的值。这里保证n小于10的100次幂。 输出格式:在一行内输出n的各位数字之和的每一位,拼音数字间有1 空格,但一行中最后一个拼音数字后没有空格。 输入样例: 1234567890987654321123456789 输出样例: yi san wu
- uva12325 暴力枚举
- openvas scanner 服务未启动修复
- android——判断当前网络是否可用
- Delphi DBGrid类控件定位到某一行,并更改为选中状态。
- MVC、MVP和MVVM浅谈
- idea常用设置(持续更新)
- Cocos2d-x游戏导出android工程,提取cocos的so文件
- nginx 代理tcp长连接短连接配置
热门文章
- Java基础01-JVM内存分析
- python单元测试框架-unittest(五)之跳过测试和预期失败
- MySQL 8.0之后版本密码修改
- bundle绑定资源表
- windows常用命令行总结
- springboot从入门到精通(三)
- JSP中的<;%%>;,<;%! %>;,<;%= %>;,<;%-- --%>;
- Flask-Script-Migrate
- three.js学习笔记--基础知识
- Android GreenDAO 3.0 不修改版本号的情况下增加、删除表、添加字段