使用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 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
Jan 31 Javascript
如何减少浏览器的reflow和repaint
Feb 26 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
AngularJS 单元测试(二)详解
Sep 21 Javascript
Javascript中的async awai的用法
May 17 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vue.js计算属性computed用法实例分析
Jul 06 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
Sep 07 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中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
2011/12/06 PHP
php+html5+ajax实现上传图片的方法
2016/05/14 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
js parseInt("08")未指定进位制问题
2010/06/19 Javascript
javascript实现时间格式输出FormatDate函数
2015/01/13 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
2016/11/30 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
jQuery 开发之EasyUI 添加数据的实例
2017/09/26 jQuery
基于casperjs和resemble.js实现一个像素对比服务详解
2018/01/10 Javascript
bootstrap+jquery项目引入文件报错的解决方法
2018/01/22 jQuery
小程序click-scroll组件设计
2019/06/18 Javascript
angularjs1.X 重构controller 的方法小结
2019/08/15 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
[03:35]2018年度DOTA2最佳辅助位选手5号位-完美盛典
2018/12/17 DOTA
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
关于Java finally的面试题
2016/04/27 面试题
培训专员岗位职责
2014/02/26 职场文书
校园学雷锋活动月总结
2014/03/09 职场文书
美术兴趣小组活动总结
2014/07/07 职场文书
《自己的花是让别人看的》教学反思
2016/02/19 职场文书
大学生创业,为什么都会选择快餐饮?
2019/08/08 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server