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

相关文章

来自专栏我和未来有约会

Silverlight控件 - Carrousel

Silverlight控件 - Carrousel 简介: Carrousel是一个布局控件,可对其内部的子控件排出像《旋转木马》一样的效果。 项目地...

3356
来自专栏前端新视界

Angular CLI 升级 6.0 之后遇到的问题

1742
来自专栏小文博客

win10 Edge浏览器插件开发

1102
来自专栏Web 开发

使用开源phpmailer发送邮件

网上也有几篇教程,不过我是为了给自己的服务可以发送邮件给自己用,所以只是用phpmailer的base功能,不需要使用smtp。

840
来自专栏小樱的经验随笔

BugkuCTF 文件上传测试

前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文...

3228
来自专栏python学习之旅

Python网络爬虫笔记(四):使用selenium获取动态加载的内容

(一)  说明 上一篇只能下载一页的数据,第2、3、4....100页的数据没法获取,在上一篇的基础上修改了下,使用selenium去获取所有页的href属性值...

3516
来自专栏ionic3+

【技巧】ionic后FileTransfer时代的文件传输

FileTransfer是常用的Codrodva插件之一,在过去的几篇文章中都能看到它的身影:

893
来自专栏逸鹏说道

LoTVideo:只需两步,让HTML5原生态的Video茁壮成长

新手参考: 开源地址:https://github.com/dunitian/LoTHTML5/tree/master/LoTVideo 第一步引入lotvid...

3357
来自专栏挖坑填坑

使用.net core ABP和Angular模板构建博客管理系统(实现编辑页面功能)

别忘记app.module.ts中也需要引入ReactiveFormsModule

883
来自专栏从零开始学自动化测试

Selenium2+python自动化29-js处理多窗口

前言 在打开页面上链接的时候,经常会弹出另外一个窗口(多窗口情况前面这篇有讲解:Selenium2+python自动化13-多窗口、句柄(handle)),这样...

2744

扫码关注云+社区