ES2017(ES8)于2017年六月底发布,包括了对象值遍历Object.values(obj)、对象的属性描述符获取Object.getOwnPropertyDescriptor(obj, prop)、异步处理方案async await等,具体的可参见文档查看完整版本
本文主要讲述webpack + babel 实现ES8的使用,工具如下:
[email protected]
[email protected]
作为一个时刻关注行业动向的前端er,最想做的应该是把新发布的Features赶紧用在自己的项目里or在个人项目中先练习使用。
通过webpack + babel能让我们快速的实现我们的想法,这里在index.js文件中使用到了async/await。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17// index.js
function sleep(time) {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(Math.random());
resolve();
}, time * 1000);
});
}
async function main () {
console.log('print random: ');
await sleep(1);
console.log("print end.")
}
main();
操作步骤和把大象放进冰箱一致
1.安装
如果之前已经在使用webpack,可直接在项目中进行babel-polyfill安装1
cnpm i -D babel-polyfill
此时已经可在package.json和node_modules中找到它的踪迹了。
2.配置
找到webpack配置文件,一般为webpack.config.js
找到文件入口 entry 项
原来输出index.js时为:
修改后
3.使用
现在可以在js中放心使用了,运行看看结果:
tips
最开始引入polyfill后,在index.js文件头部使用import导入后报错“only one instance of babel-polyfill is allowed”
这种情况提示的也很清楚了,检查后删除该文件中的导入语句就可以了,相当于 只能在webpack配置文件中的entry入口中使用 。
且一个页面中只能导入一次polyfill,不能在一个页面的多个js分别导入。
另外这个模块占的控件也比较大 未压缩前244KB,min压缩版也有103KB。
所以建议在个人项目里学习新东西的时候敞开用,生产环境还是斟酌一下,毕竟新增的东西我们主要是要先了解其实现原理和使用方法,再结合实际项目来使用。