Webpack4 使用Babel处理ES6语法的方法示例
作者:芦苇De四季 发布时间:2023-08-30 08:12:37
修改 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
了,看一下打包的结果:
没问题,语法已经翻译成了当前所有浏览器能识别的语法,但是做到了这一点还是不够,因为那些比较新的对象和函数,比如这里的 Promise
和 map
,在低版本的浏览器里实际还是不存在的。所以这时不仅要进行语法的转换,还要想办法把这些新的特性,补充到低版本的浏览器里。怎么做呢? babel
提供了一个工具叫 polyfill
,安装:
npm install @babel/polyfill -D
然后在 index.js 的最顶部,引入这个包:
import '@babel/polyfill'
保存代码,再次进行打包查看结果,可以发现打包后的 main.js 里面,有了很多代码来帮助实现比如 Promise
和 map
这些新特性。看一下 main.js 文件的大小:
859KB,再看一下没有使用 polyfill
之前的 main.js 大小:
只有4.36KB,使用 polyfill
之后文件变大了很多,这说明了 polyfill
使用了非常多的代码来填入新特性。
但是,index.js 里只使用了 Promise
和 map
,其它的新特性都没用,能不能把那些没用到的实现方法都剔除了呢? 可以,给 preset-env 增加一个 useBuiltIns 配置:
rules: [{
test: /\.js$/,
exclude: /node_modules/, // 排除该目录下的所有代码
loader: 'babel-loader',
options: {
'presets': [
['@babel/preset-env', {
useBuiltIns: 'usage'
}]
]
}
}]
useBuiltIns: 'usage'
的意思就是说,当使用 polyfill
往低版本浏览器填入一些不存在的特性时,不是全部都填入,而是根据业务代码使用到的特性去选择填入,比如这里使用了 Promise
和 map
,那就只填入这两个,其它的都不用。 再次打包查看结果:
可以看到,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
代码的支持情况,是否有必要进行语法转换、填入一些新特性。 运行打包命令查看结果:
发现还是输出的 Promise
和 map
,并没有进行新特性的填入,说明这三个版本的浏览器对 ES6
的支持已经很好了,不需要在进行额外的处理,main.js 的大小是变成了最初的4.36KB。
到此为止,webpack
对 ES6
的简单处理就完成了。
关于 babel
还有很多东西和配置项,更多的知识要到 https://babel.docschina.org 来学习。
来源:https://segmentfault.com/a/1190000018419118
猜你喜欢
- '====================================='功能:根据ip地址输出地区'参数:ip
- asp如何显示全部的环境变量?<%@Language="VBScript"%><%dim H
- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
- 写了几年代码,很少谈到javascript程序的执行效率问题,今天就举几个例子看看,让大家看看程序优化是多么重要。这节来看看createEl
- 阅读上一篇:WEB前端开发经验总结 ⅠWEB标准篇现在我们接着来讲怎么在实际开发中结合我前面所讲的理论来开发制作页面吧。现在就来看看我们要制
- CSS Sprites 简介:通常被意译为“CSS图像拼合”或“CSS贴图定位”。CSS Sprites并不是一门新技术,目前它已经在网页开
- asp中我们可以利用ERR对象来判断sql语句执行是否成功:SQL="Insert INTO TABLE(F1,F2) value
- 一个不错的js星级评分代码,可以评多个指标。相关文章推荐:用css制作星级投票评分功能 效果图:<script language=&q
- 给浏览器绑定事件有时候是非常痛苦的事情,不同的浏览器提供不尽相同的功能的同时,也提供了不同的事件。例如,IE 系列的浏览器支持 mousee
- 需要的软件phpStudy 用来导入一个数据库api-server 数据库功能可以开启一个服务器,让开发环境可以使用生产环境的网址请求安装
- javascript 常见汉字转换成拼音,上下行排列,方便对比,速度快,你可以把代码复制到本地,作为一个不错的汉字转换拼音的工具!转换效果图
- Example.asp<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001&qu
- /usr/sbin/groupadd mysql/usr/sbin/useradd -g mysql mysqlunzip mysql-5.
- 问题描述时间在我们日常的代码编写中会是经常出现的筛选或排序条件,尤其是一些特殊时间节点的时间显得尤为突出,例如昨天,当前日期,当前月份,当前
- blankzheng的blog:http://www.planabc.net/1、使用fieldset和legend标签在form中,我们经
- Ewebeditor及fckeditork,90%的网站都是采用这两种编辑器作为产品或者内容的说明部分的编辑窗口,近日,一客户的外贸站点基本
- Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库。任何
- 一些MySQL发布对MySQL数据库中的系统表的结构进行了更改,添加了新权限或特性。当你更新到新版本MySQL,你应同时更新系统表,以确保它
- 目前市面上成熟的CMS产品有很多,无外乎两种解决方案:第一种就是用XSL+XML的方式来实现客户端具体数据;第二种是生成HTML或者SHTM
- 1、信息表新建立一个字段,并用0、1的方法判断信息的状态。 2、新建一个页面,定时刷新,并查询表中是否有字段值为0的记录。 3、当管理员点击