webpack运行Babel教程

摘要: Babel是转码器,webpack是打包工具,它们应该如何一起使用呢?

ES6 + IE10 = 语法错误!

test.js使用了ES6的箭头函数

setTimeout(() =>{ console.log("Hello, Fundebug!");}, 100)

由于低版本的浏览器没有支持ES6语法,这就意味着代码会出错。例如,在IE 10浏览器中,会出现”语法错误”:

如果你使用了Fundebug错误监控服务,则会收到这样的报错:

直接使用babel转码

当你使用更高版本的JavaScript语法时,比如ES7,低版本的浏览器将无法运行。为了兼容低版本的浏览器,比如万恶的IE,我们不得不使用Babel,将ES6、ES7等高版本代码转换为ES5代码。

安装babel-cli

sudo npm install --global babel-cli

使用babel命令转码

babel test.js --out-file compiled.js

转码之后生成的代码为compiled.js

setTimeout(function () { console.log("Hello, Fundebug!");}, 100);

可知,箭头函数转换成了function,这样就代码可以在IE 10等不支持ES6的浏览器上正确执行了。

广告:欢迎免费试用Fundebug,助您第一时间发现代码BUG。

使用webpack运行Babel

一般项目中都会使用webpack对代码进行打包,比如,将多个js文件打包成1个js文件,这样可以减少前端的资源请求。因此,我们需要将Babel也集成到webpack中。

安装webpack

npm install --global webpack

我使用的webpack版本为4.10.0

webpack --version4.10.0

安装babel

npm install --save-dev babel-cli babel-preset-env

babel-preset-env是Babel新版的preset,它可以让我们灵活地设置代码目标执行环境,比如只支持各个浏览器最新的2个版本,支持IE8及其以上的IE浏览器。

安装babel-loader

npm install --save-dev babel-loader

babel-loader是webpack的babel插件,它让我们可以在wepback中运行Babel。

配置babel

新增.babelrc文件:

{ "presets": ["env"]}

配置webpack

新增webpack.config.js文件:

module.exports = { entry: './test.js', output: { path: __dirname, filename: 'bundle.js' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }] }};

可知,我们在webpack中使用了babel-loader插件来运行Babel,转换所有的.js代码(除了node_modules中的代码)。

使用webpack运行babel

webpack --mode production

转换之后的代码为bundle.js。bundle.js只有1行代码,这是因为为我们指定的mode为production,webpack为了压缩代码只生成了1行代码。

参考

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 如何创建修改保存位图 创建保存图片在 Image 控件使用WriteableBitmap 转换通过读写像素转换 CanvasBitmap

在 UWP 使用底层的图像渲染就是使用 Softwarebitmap ,这个类提供直接数据修改,可以使用这个类进行软渲染。实际上 Softwarebitmap ...

2631
来自专栏每日一篇技术文章

go - os包 彻头彻尾用法使用

os包提供了操作系统函数的不依赖平台的接口。设计为Unix风格的,虽然错误处理是go风格的;失败的调用会返回错误值而非错误码。通常错误值里包含更多信息。例如,如...

2276
来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

833
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

1562
来自专栏向治洪

微信小程序实例-摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

2.4K10
来自专栏SHERlocked93的前端小站

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

2092
来自专栏IT笔记

SpringMvc+Velocity的一些配置总结

前言 公司用了许久的struts2+hibernate,前两年时间SpringMvic+Shiro也有做过,大多都是基于JSP实现的界面展示层,最近一段使用使用...

3517
来自专栏DannyHoo的专栏

底牌项目中上传牌谱功能之编辑标准模式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/de...

1083
来自专栏Pythonista

Golang之Mysql事务

2562
来自专栏Petrichor的专栏

nano:基本操作

1544

扫码关注云+社区