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 相关文章推荐
JavaScript读取中文cookie时的乱码问题的解决方法
Oct 14 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
js实现touch移动触屏滑动事件
Apr 17 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
基于vue的短信验证码倒计时demo
Sep 13 Javascript
你应该了解的JavaScript Array.map()五种用途小结
Nov 14 Javascript
详解nvm管理多版本node踩坑
Jul 26 Javascript
JavaScript Array对象基本方法详解
Sep 03 Javascript
vue使用echarts画组织结构图
Feb 06 Vue.js
深入理解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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
分享php分页的功能模块
2015/06/16 PHP
PHP之图片上传类实例代码(加了缩略图)
2016/06/30 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
Zero Clipboard js+swf实现的复制功能使用方法
2010/03/07 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
Node.js编码规范
2014/07/14 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
javascript操作ul中li的方法
2015/05/14 Javascript
详解JavaScript的变量和数据类型
2015/11/27 Javascript
JQuery异步加载PartialView的方法
2016/06/07 Javascript
微信小程序 开发指南详解
2016/09/27 Javascript
JS正则匹配URL网址的方法(可匹配www,http开头的一切网址)
2017/01/06 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
Python读写文件方法总结
2015/06/09 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
利用Python在一个文件的头部插入数据的实例
2018/05/02 Python
python根据list重命名文件夹里的所有文件实例
2018/10/25 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
商务主管岗位职责
2013/12/08 职场文书
甜点店创业计划书
2014/01/27 职场文书
思想工作总结范文
2015/08/12 职场文书
小学语文教学随笔
2015/08/14 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
跟班学习心得体会(共6篇)
2016/01/23 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
某某店铺的开业庆典主持词范本
2019/11/25 职场文书
vue判断按钮是否可以点击
2022/04/09 Vue.js
python数字图像处理:图像的绘制
2022/06/28 Python