使用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计算页面执行时间的函数
Dec 07 Javascript
可以用来调试JavaScript错误的解决方案
Aug 07 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
javascript浏览器兼容教程之事件处理
Jun 09 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 语法
Jan 09 Javascript
JavaScript数据类型判定的总结笔记
Jul 31 Javascript
JS产生随机数的几个用法详解
Jun 22 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
JavaScript实现背景自动切换小案例
Sep 27 Javascript
微信公众号服务器验证Token步骤图解
Dec 30 Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 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
优化使用mysql存储session的php代码
2008/01/10 PHP
php使用Smarty的相关注意事项及访问变量的几种方式
2011/12/08 PHP
利用php递归实现无限分类 格式化数组的详解
2013/06/08 PHP
强制PHP命令行脚本单进程运行的方法
2014/04/15 PHP
php json_encode()函数返回json数据实例代码
2014/10/10 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
JS实现自适应高度表单文本框的方法
2015/02/25 Javascript
探究Javascript模板引擎mustache.js使用方法
2016/01/26 Javascript
Vue.js父与子组件之间传参示例
2017/02/28 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
100行代码实现一个vue分页组功能
2018/11/06 Javascript
详解Vue.js中引入图片路径的几种方式
2019/06/17 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
详解JavaScript中的Object.is()与"==="运算符总结
2020/06/17 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
python使用wmi模块获取windows下的系统信息 监控系统
2015/10/27 Python
在Python中使用AOP实现Redis缓存示例
2017/07/11 Python
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
python实现维吉尼亚加密法
2019/03/20 Python
Python for循环通过序列索引迭代过程解析
2020/02/07 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
5 分钟读懂Python 中的 Hook 钩子函数
2020/12/09 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
应届生的求职推荐信范文
2013/11/30 职场文书
结婚喜宴家长答谢词
2014/01/15 职场文书
IT工程师岗位职责
2014/07/04 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
授权委托书协议书
2014/10/16 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书