使用webpack将ES6转化ES5的实现方法


Posted in Javascript onOctober 13, 2019

babel使用

打开babel官网,按教程安装babel

安装

npm install --save-dev babel-loader @babel/core @babel/preset-env

配置rules

module: {
 rules: [
  { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
 ]
}

生成 .babelrc文件

{
 "presets": ["@babel/preset-env"]
}

此时webpack已经能正确的将高版本的js语法转为低版本的语法,但是对于新增的api并不会转化,如promise。这时我们就需要其他的插件

使用polyfill插件,对于babel=>7.4.0该方法弃用

安装

npm install --save @babel/polyfill

修改 .babelrc

{
 "presets": [
  [
   "@babel/preset-env",
   {
     "useBuiltIns":"usage" // 只转化使用了的API
   }
  ]
 ]
}

使用 在需要转换的文件里引入polyfill

import "@babel/polyfill";

@babel/polyfill 和 @babel/preset-env 的关系

@babel/preset-env 中与 @babel/polyfill 的相关参数有 targets 和 useBuiltIns 两个

targets: 支持的目标浏览器的列表

useBuiltIns: 参数有 “entry”、”usage”、false 三个值。默认值是false,此参数决定了babel打包时如何处理@babel/polyfilll 语句。

“entry”: 会将文件中 import‘@babel/polyfilll'语句 结合 targets ,转换为一系列引入语句,去掉目标浏览器已支持的polyfilll 模块,不管代码里有没有用到,只要目标浏览器不支持都会引入对应的polyfilll 模块。

“usage”: 不需要手动在代码里写import‘@babel/polyfilll',打包时会自动根据实际代码的使用情况,结合 targets 引入代码里实际用到 部分 polyfilll 模块

false: 对 import‘@babel/polyfilll'不作任何处理,也不会自动引入 polyfilll 模块

使用plugin-transform-runtime

安装

npm install --save-dev @babel/plugin-transform-runtime

修改 .babelrc

{
"presets": [
  [
   "@babel/preset-env"
  ]
 ],
 "plugins": [
  [
   "@babel/plugin-transform-runtime",
   {
    "absoluteRuntime": false,
    "corejs": 3,
    "helpers": true,
    "regenerator": true,
    "useESModules": false
   }
  ]
 ]
}

注意上面corejs设置项,不同的值需要不同的依赖包

corejs的值 需要安装的依赖包
false npm install --save @babel/runtim
2 npm install --save @babel/runtime-corejs2
3 npm install --save @babel/runtime-corejs3

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery怎样实现ajax联动框(二)
Mar 08 Javascript
Angular中的Promise对象($q介绍)
Mar 03 Javascript
浅谈JSON.parse()和JSON.stringify()
Jul 14 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
Jan 22 Javascript
js判断图片加载完成后获取图片实际宽高的方法
Feb 25 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
js+canvas实现动态吃豆人效果
Mar 22 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 #Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 #Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 #Javascript
vue中添加与删除关键字搜索功能
Oct 12 #Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
You might like
隐藏你的.php文件的实现方法
2007/03/19 PHP
PHP生成制作验证码的简单实例
2016/06/12 PHP
php实现图片压缩处理
2020/09/09 PHP
JavaScript高级程序设计 阅读笔记(二十) js错误处理
2012/08/14 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
JavaScript中检测变量是否存在遇到的一些问题
2013/11/11 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
2014/12/20 Javascript
BootStrap中的table实现数据填充与分页应用小结
2016/05/26 Javascript
JavaScript中日期函数的相关操作知识
2016/08/03 Javascript
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
js制作简单的音乐播放器的示例代码
2017/08/28 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
2017/09/14 Javascript
js Dom实现换肤效果
2017/10/21 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
Vue 列表上下过渡效果的实例代码
2019/06/25 Javascript
解决vue无法侦听数组及对象属性的变化问题
2020/07/17 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
微信小程序实现锚点跳转
2020/11/23 Javascript
在python中利用最小二乘拟合二次抛物线函数的方法
2018/12/29 Python
在Django model中设置多个字段联合唯一约束的实例
2019/07/17 Python
PyTorch 解决Dataset和Dataloader遇到的问题
2020/01/08 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
台湾旅游网站:雄狮旅游网
2017/08/16 全球购物
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
会计电算化应届生自荐信
2014/02/25 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
结婚老公保证书
2015/02/26 职场文书
老公出轨后的保证书
2015/05/08 职场文书
2015年妇幼保健工作总结
2015/05/19 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
css之clearfix的用法深入理解(必看篇)
2023/05/21 HTML / CSS