Webpack4 使用Babel处理ES6语法的方法示例


Posted in Javascript onMarch 07, 2019

修改 index.js 内容,写一些 ES6 的语法:

const arr = [
  new Promise(() => {}),
  new Promise(() => {})
];

arr.map(item => {
  console.log(item);
})

ES6 很强大,但目前并不是所有的浏览器都支持,所以需要用到 Babel,让旧的浏览器或环境中将 ES6 代码转换为向后兼容版本的 JavaScript 代码。

来试一下吧,先安装需要用的 Babel 包:

npm install babel-loader @babel/core -D

配置 webpack.config.js,增加一条 rulues :

module: {
  rules: [{
   test: /\.js$/,
   exclude: /node_modules/, // 排除该目录下的所有代码
   loader: "babel-loader"
  }]
 }

babel-loader 告诉了 webpack 怎么处理 ES6 代码,但它并不会将ES6 代码翻译成向后兼容版本的代码,如果想要执行这一步,还需要安装一个模块 preset-env,它包含了所有 ES6 代码转换的规则:

npm install @babel/preset-env -D

安装完之后配置一下:

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options:{
  'presets': ['@babel/preset-env']
 }
}]

这样,运行打包命令,就可以把 ES6 语法翻译成 ES5了,看一下打包的结果:

Webpack4 使用Babel处理ES6语法的方法示例

没问题,语法已经翻译成了当前所有浏览器能识别的语法,但是做到了这一点还是不够,因为那些比较新的对象和函数,比如这里的 Promisemap,在低版本的浏览器里实际还是不存在的。所以这时不仅要进行语法的转换,还要想办法把这些新的特性,补充到低版本的浏览器里。怎么做呢? babel 提供了一个工具叫 polyfill,安装:

npm install @babel/polyfill -D

然后在 index.js 的最顶部,引入这个包:

import '@babel/polyfill'

保存代码,再次进行打包查看结果,可以发现打包后的 main.js 里面,有了很多代码来帮助实现比如 Promisemap 这些新特性。看一下 main.js 文件的大小:

Webpack4 使用Babel处理ES6语法的方法示例

859KB,再看一下没有使用 polyfill 之前的 main.js 大小:

Webpack4 使用Babel处理ES6语法的方法示例

只有4.36KB,使用 polyfill 之后文件变大了很多,这说明了 polyfill 使用了非常多的代码来填入新特性。
但是,index.js 里只使用了 Promisemap,其它的新特性都没用,能不能把那些没用到的实现方法都剔除了呢? 可以,给 preset-env 增加一个 useBuiltIns 配置:

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage'
   }]
  ]
 }
}]

useBuiltIns: 'usage' 的意思就是说,当使用 polyfill 往低版本浏览器填入一些不存在的特性时,不是全部都填入,而是根据业务代码使用到的特性去选择填入,比如这里使用了 Promisemap,那就只填入这两个,其它的都不用。 再次打包查看结果:

Webpack4 使用Babel处理ES6语法的方法示例

可以看到,main.js 的大小只有 138KB了。

这里还可以配置一些其它的参数,比如 targets 参数:

rules: [{
 test: /\.js$/,
 exclude: /node_modules/, // 排除该目录下的所有代码
 loader: 'babel-loader',
 options: {
  'presets': [
   ['@babel/preset-env', {
    useBuiltIns: 'usage',
    targets:{
     edge: '17', // edge高于17的版本
     firefox: '60', // firefox 高于60的版本
     chrome: '67' // chrome高于67的版本
    }
   }]
  ]
 }
}]

targets 是指打包会运行在什么样的浏览器,这有三个浏览器,并注明了最低版本。在打包的过程中,babel 会去看这些浏览器对 ES6 代码的支持情况,是否有必要进行语法转换、填入一些新特性。 运行打包命令查看结果:

Webpack4 使用Babel处理ES6语法的方法示例

发现还是输出的 Promisemap,并没有进行新特性的填入,说明这三个版本的浏览器对 ES6 的支持已经很好了,不需要在进行额外的处理,main.js 的大小是变成了最初的4.36KB。

到此为止,webpackES6 的简单处理就完成了。

关于 babel 还有很多东西和配置项,更多的知识要到 https://babel.docschina.org 来学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery插件PageSlide实现左右侧栏导航菜单
Apr 12 Javascript
JavaScript SHA512&SHA256加密算法详解
Aug 11 Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
vue.js指令v-model实现方法
Dec 05 Javascript
JS实现的简易拖放效果示例
Dec 29 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
jQuery解析json格式数据示例
Sep 01 jQuery
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
p5.js绘制旋转的正方形
Oct 23 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
深入理解react 组件类型及使用场景
Mar 07 #Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 #Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
Mar 07 #Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 #Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 #jQuery
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 #Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
Mar 07 #Javascript
You might like
一段php加密解密的代码
2006/10/09 PHP
php分页函数示例代码分享
2014/02/24 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
JavaScript入门教程(1) 什么是JS
2009/01/31 Javascript
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
vue.js入门教程之计算属性
2016/09/01 Javascript
javascript实现的上下无缝滚动效果
2016/09/19 Javascript
Vue中$refs的用法详解
2018/06/24 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
实例讲解React 组件
2020/07/07 Javascript
uniapp微信小程序实现一个页面多个倒计时
2020/11/01 Javascript
[01:45]2014DOTA2 TI预选赛预选赛 战前探营!
2014/05/21 DOTA
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
用Python实现大文本文件切割的方法
2019/01/12 Python
Python中的引用知识点总结
2019/05/20 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
虚拟机下载python是否需要联网
2020/07/27 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
2016/11/17 HTML / CSS
ddl,dml和dcl的含义
2016/05/08 面试题
接待员岗位责任制
2014/02/10 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
入党自荐书范文
2014/03/09 职场文书
社区服务活动总结
2014/05/07 职场文书
单位实习工作证明怎么写
2014/11/02 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
党员评议自我评价
2015/03/03 职场文书
综合素质自我评价评语
2015/03/06 职场文书
土建技术员岗位职责
2015/04/11 职场文书
Python中递归以及递归遍历目录详解
2021/10/24 Python
InterProcessMutex实现zookeeper分布式锁原理
2022/03/21 Java/Android