使用babel插件集

本文详细介绍了如何配置和使用Babel将ES6代码转换为浏览器兼容的ES5代码。主要内容包括:配置.babelrc文件、安装和设置babel-preset-latest插件集、使用babel-polyfill解决新API兼容性问题、以及如何通过babel-register实现在Node.js环境中实时转码。

1).打开配置文件".babelrc",配置插件集,代码如下:

{

"presets":["latest"]

}

2).安装babel插件集,打开命令窗口,输入如下命令:

npm install babel-preset-latest

3).开发者需要注意的是,babel只对ES6的新语法进行转码,不会转换成新的API,比如不支持转码Object.assign函数,如果开发中用到的新的API,可以使用babel-polyfill添加垫片。安装垫片代码如下,

npm install babel-polyfill

4).安装成功之后,在入口脚本文件头部加入垫片,代码如下

import “babel-polyfill”;

5).如果在Node.js环境里运行javascript文件,除了可以使用命令在运行前进行转码外,也可以使用钩子在运行时进行转码,创建server.js 文件,输入如下代码

import "http"

console.log("Hello world");

6).打开命令窗口,输入命令,运行server.js,命令如下:

node server.js

因为Node.js 不支持es6的important语法,会出现报错信息"Unexpected  token  import".

7).打开命令行窗口,安装钩子,命令如下:

npm install babel-register

8).创建hook.js 文件,注册钩子,代码如下:

require("babel-register");

require("./server");

9).运行钩子文件,打开命令行窗口,输入如下命令:

 node  hook.js

 

成功打印信息  "Hello  World"

BABEL官网提供了一个在线转换的页面https://babeljs.io/repl/,可以实时查看es6转码成es5的格式,还可以配置不同的插件以及插件集,对学习es6以及babel非常有帮助。

转载于:https://www.cnblogs.com/zhousen34/p/8658608.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值