babel-polyfill--------了解Babel的神奇作用

3 篇文章 0 订阅
本文介绍了Babel转码器的基本使用方法,包括命令行转码、创建支持ES6的REPL环境及如何使用babel-polyfill填充API差异。通过实际示例展示了如何将现代JavaScript代码转换为向后兼容的版本。
摘要由CSDN通过智能技术生成

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而可以在现有环境执行。所以你可以用ES6编写,而不用考虑环境支持的问题。

下面是一个例子:

allen.map(item => item + 1);//转码前

allen.map(function (item) {// 转码后

  return item + 1;

});

一:命令行转码:

Babel提供babel-cli工具,用于命令行转码。

它的安装命令-------------------cnpm install --global babel-cli

基本用法如下。

# 转码结果输出到标准输出
$ babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib

# -s 参数生成source map文件
$ babel src -d lib -s

在全局环境下,进行Babel转码。全局环境必须有Babel解决办法是将babel-cli安装在项目之中。

安装-------------cnpm install --save-dev babel-cli-------------------------然后,改写package.json

 

二:babel-node

 babel-cli工具自带一个babel-node命令,提供一个支持ES6REPL环境。它支持NodeREPL环境的所有功能,而且可以直接运行ES6代码。

它不用单独安装,而是随babel-cli一起安装。然后,执行babel-node就进入PEPL环境。

babel-node命令可以直接运行ES6脚本


三:babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如IteratorGeneratorSetMapsProxyReflectSymbolPromise等全局对象,

以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。

举例来说,ES6Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。

安装命令----cnpm install --save babel-polyfill

因为这是一个 polyfill (它需要在你的源代码之前运行),我们需要让它成为一个 dependency,

而不是一个 devDependency.

然后,在脚本头部,加入如下一行代码。

import 'babel-polyfill';

// 或者

require('babel-polyfill');

Babel默认不转码的API非常多,详细清单可以查看babel-plugin-transform-runtime模块的definitions.js文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值