使用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代码
Mar 27 Javascript
模仿JQuery sortable效果 代码有错但值得看看
Nov 05 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
Sep 28 Javascript
jquery实现图片裁剪思路及实现
Aug 16 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
前台js对象在后台转化java对象的问题探讨
Dec 20 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JavaScript在form表单中使用button按钮实现submit提交方法
Jan 23 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
小程序实现投票进度条
Nov 20 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对mongodb的扩展(初出茅庐)
2012/11/11 PHP
PHP产生不重复随机数的5个方法总结
2014/11/12 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
php5.5使用PHPMailer-5.2发送邮件的完整步骤
2018/10/14 PHP
Laravel框架查询构造器简单示例
2019/05/08 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
passwordStrength 基于jquery的密码强度检测代码使用介绍
2011/10/08 Javascript
关于JS判断图片是否加载完成且获取图片宽度的方法
2013/04/09 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
ECMAScript5中的对象存取器属性:getter和setter介绍
2014/12/08 Javascript
pace.js页面加载进度条插件
2015/09/29 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
Angular2中select用法之设置默认值与事件详解
2017/05/07 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
详解vue2.6插槽更新v-slot用法总结
2019/03/09 Javascript
js删除指定位置超链接中含有百度与360的标题
2021/01/06 Javascript
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
pygame游戏之旅 添加键盘按键的方法
2018/11/20 Python
利用python修改json文件的value方法
2018/12/31 Python
Python实现对特定列表进行从小到大排序操作示例
2019/02/11 Python
学习python的前途 python挣钱
2019/02/27 Python
python协程gevent案例 爬取斗鱼图片过程解析
2019/08/27 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
基于Python和PyYAML读取yaml配置文件数据
2020/01/13 Python
python使用正则表达式匹配txt特定字符串(有换行)
2020/12/09 Python
优秀士兵个人事迹材料
2014/01/19 职场文书
省委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
佛光寺导游词
2015/02/10 职场文书
婚庆司仪开场白
2015/05/29 职场文书
《叶问2》观后感
2015/06/15 职场文书
爱心捐赠活动简讯
2015/07/20 职场文书
python 实现的截屏工具
2021/05/08 Python
浅谈python数据类型及其操作
2021/05/25 Python
详解java如何集成swagger组件
2021/06/21 Java/Android