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自适应IFrame高度(支持嵌套 兼容IE,ff,safafi,chrome)
Mar 28 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
JS获取子窗口中返回的数据实现方法
May 28 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
Nov 05 Javascript
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
vue组件间的参数传递实例详解
Apr 26 Javascript
详解Vue2.5+迁移至Typescript指南
Aug 01 Javascript
layui实现二维码弹窗、并下载到本地的方法
Sep 25 Javascript
原生js实现随机点名功能
Nov 05 Javascript
javascript 代码是如何被压缩的示例代码
May 06 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
层叠菜单的动态生成
2006/10/09 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
node.js中的buffer.Buffer.byteLength方法使用说明
2014/12/10 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
jQuery实现切换字体大小的方法
2015/03/10 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
js window对象属性和方法相关资料整理
2015/11/11 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
vue3.0 CLI - 2.2 - 组件 home.vue 的初步改造
2018/09/14 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
2019/09/19 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
js 获取扫码枪输入数据的方法
2020/06/10 Javascript
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
Python装饰器模式定义与用法分析
2018/08/06 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
全球知名的婚恋交友网站:Match.com
2017/01/05 全球购物
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
绩效专员岗位职责
2013/12/02 职场文书
竞聘副主任科员演讲稿
2014/01/11 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
酒店七夕情人节活动策划方案
2014/08/24 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
单独二胎证明
2015/06/24 职场文书
Nginx缓存设置案例详解
2021/09/15 Servers