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 条评论
登录 后参与评论

相关文章

来自专栏Pythonista

Golang之Mysql事务

2032
来自专栏DannyHoo的专栏

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

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

893
来自专栏技术小讲堂

ASP.NET AJAX(3)__UpdatePanel

今天也不知道写不写的完了,最近闲下来了,却感冒了,早上起来都不会说话了,不过幸亏咱不是靠嘴皮子过活了,哎~~~~窃喜吧 上一篇简单写到UpdatePanel的一...

3225
来自专栏CSDN技术头条

前端知识点总结——Vue

作用:将表达式执行的结果 输出当调用元素的 innerHTML 中;还可以将数据绑定到视图。

802
来自专栏向治洪

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

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

3896
来自专栏SHERlocked93的前端小站

Vue 使用中的小技巧

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

1392
来自专栏君赏技术博客

启动图第一篇教程

对于基本的工程设置我就不多说了,可以参考我一键替换测试和正式key的专题,那里有介绍。

1112
来自专栏林德熙的博客

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

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

1531
来自专栏Petrichor的专栏

nano:基本操作

1124
来自专栏移动开发之家

GSYVideoPlayer项目说明

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

613

扫码关注云+社区