使用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 相关文章推荐
不用写JS也能使用EXTJS视频演示
Dec 29 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
Feb 18 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
jQuery实现点击文本框弹出热门标签的提示效果
Nov 17 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
Three.js学习之几何形状
Aug 01 Javascript
jQuery实现文字自动横移
Jan 08 Javascript
理解javascript async的用法
Aug 22 Javascript
利用babel将es6语法转es5的简单示例
Dec 01 Javascript
js中apply和Math.max()函数的问题及区别介绍
Mar 27 Javascript
js+canvas绘制图形验证码
Sep 21 Javascript
详解如何在Canvas中添加事件的方法
Apr 17 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
全国FM电台频率大全 - 20 广西省
2020/03/11 无线电
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
jQuery UI AutoComplete 使用说明
2011/06/20 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
jquery中one()方法的用法实例
2015/01/16 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
Node.js和MongoDB实现简单日志分析系统
2015/04/25 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
详解Vue+elementUI build打包部署后字体图标丢失问题
2020/07/13 Javascript
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python编程实现归并排序
2017/04/14 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
印尼在线购买隐形眼镜网站:Lensza.co.id
2019/04/27 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
预备党员转正考核材料
2014/06/03 职场文书
岗位工作说明书
2014/07/29 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书