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 浏览器验证代码(来自discuz)
Jul 17 Javascript
在JavaScript中构建ArrayList示例代码
Sep 17 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
Vue实现微信支付功能遇到的坑
Jun 05 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
layui复选框的全选与取消实现方法
Sep 02 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
使用react+redux实现计数器功能及遇到问题
Jun 02 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
PHP4与PHP5的时间格式问题
2008/02/17 PHP
探讨PHP JSON中文乱码的解决方法详解
2013/06/06 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
使用PHP+AJAX让WordPress动态加载文章的教程
2015/12/11 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
php 防止表单重复提交两种实现方法
2016/11/03 PHP
php实现数据库的增删改查
2017/02/26 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
2019/10/30 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
js event事件的传递与冒泡处理
2009/12/06 Javascript
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
Jquery下attr和removeAttr的使用方法
2010/12/28 Javascript
html中table数据排序的js代码
2011/08/09 Javascript
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
2013/11/03 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JQuery查找DOM节点的方法
2015/06/11 Javascript
简单实现JS对dom操作封装
2015/12/02 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
老生常谈js数据类型
2017/08/03 Javascript
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python两种注释用法的示例
2020/10/09 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
高一新生军训方案
2014/05/12 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
三好学生主要事迹怎么写
2015/11/03 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
详解非极大值抑制算法之Python实现
2021/06/28 Python