使用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抖动元素的小例子
Oct 28 Javascript
浅析Js中的单引号与双引号问题
Nov 06 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
JavaScript获取URL汇总
Jun 08 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
JS实现浏览上传文件的代码
Aug 23 Javascript
深入理解Angularjs 脏值检测
Oct 12 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 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+ACCESS 文章管理程序代码
2010/06/21 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
js中if语句的几种优化代码写法
2011/03/12 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
JQuery 图片滚动轮播示例代码
2014/03/24 Javascript
javascript 获取HTML DOM父、子、临近节点
2014/06/16 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
轻松学习jQuery插件EasyUI EasyUI实现树形网络基本操作(2)
2015/11/30 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
全网小程序接口请求封装实例代码
2020/11/06 Javascript
python使用multiprocessing模块实现带回调函数的异步调用方法
2015/04/18 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
python虚拟环境迁移方法
2019/01/03 Python
简单了解python中的与或非运算
2019/09/18 Python
Python列表list常用内建函数实例小结
2019/10/22 Python
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
python词云库wordcloud的使用方法与实例详解
2020/02/17 Python
Python os库常用操作代码汇总
2020/11/03 Python
HTML5如何使用SVG的方法示例
2019/01/11 HTML / CSS
Merrell美国官网:美国登山运动鞋品牌
2018/02/07 全球购物
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
表演方阵解说词
2014/02/08 职场文书
民间借贷纠纷案件代理词
2015/05/26 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
Python 机器学习工具包SKlearn的安装与使用
2021/05/14 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python