1.Babel转码器

为什么要使用Babel?

在当代环境中虽然对ES6的支持越来越好,但是大多数还是不支持ES6,这时候我们就需要把已经写好的ES6代码转换成ES5,而Babel就是将ES6转化成ES5的转码器,被广泛使用。
举个栗子:

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

// 转码后
input.map(function (item) {
  return item + 1;
});

配置文件 .babelrc

.babelrc是babel的配置文件,放在项目的根目录下,比如现有的项目:

{
  // presets 是用来设置转码规整的,es2015就是ES6,
  // stage-2其实是一个系列,它是ES7的编码规则,有stage-0[,1,2,3], 四选一
  "presets": ["es2015", "stage-2"],
  "plugins": ["lodash", "transform-runtime"],
  "comments": false
}

基本用法如下。

# 转码结果输出到标准输出
$ 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-cli安装到项目中去:

$ npm install --save-dev babel-cli

然后,改写package.json。

{
  // ...
  "devDependencies": {
    "babel-cli": "^6.0.0"
  },
  // 这里build只是随便启的名字,运行是质询要npm run build就行了
  "scripts": {
    "build": "babel src -d lib"
  },
}

babel-polyfill

Babel默认只转换新的JavaScript句法(syntax),而不转换新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象,以及一些定义在全局对象上的方法(比如Object.assign)都不会转码。
举例来说,ES6在Array对象上新增了Array.from方法。Babel就不会转码这个方法。如果想让这个方法运行,必须使用babel-polyfill,为当前环境提供一个垫片。
安装命令如下。

$ npm install --save babel-polyfill
然后,在脚本头部,加入如下一行代码。
import 'babel-polyfill';
// 或者
require('babel-polyfill');

浏览器环境

当你不想做这些操作,或者现有的项目没有webpack等构架工具时,这一步转码过程可以放在浏览器中,只不过从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版:

$ npm install [email protected]

运行上面的命令以后,就可以在当前目录的node_modules/babel-core/子目录里面,找到babel的浏览器版本browser.js(未精简)和browser.min.js(已精简)。
然后,将下面的代码插入网页。

<script src="node_modules/babel-core/browser.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

上面代码中,browser.js是Babel提供的转换器脚本,可以在浏览器运行。用户的ES6脚本放在script标签之中,但是要注明type="text/babel"。

另一种方法是使用babel-standalone模块提供的浏览器版本,将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
<script type="text/babel">
// Your ES6 code
</script>

但是要注意的是,如果这样做浏览器会是是转换ES6代码,会使性能下降。

时间: 2024-11-06 03:29:16

1.Babel转码器的相关文章

常见的ES6转码(编译)工具——Babel转码器、Traceur转码器

在浏览器里面如何使用?现在ES6的使用也是一个新趋势,下面就来讲解转码的常见方法当ES6不兼容时,需要用到转码工具1.Babel转码器: Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行. 这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持. // 转码前 input.map(item => item + 1); // 转码后 input.map(function (item) { return item + 1; }); 上面的原始代码

Babel 转码器 &#167; es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

ES6入门一:ES6简介及Babel转码器

ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什么关系? 1996年11月,JavaScript的创造者——Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望JavaScript这种语言能够成为国际标准. 1997年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言

使用babel转码器,让浏览器支持es6语法

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascript,Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码.在babel的安装设置里我选用的是使用node 来进行安装. 1.在你的项目下输入命令: npm install --save-dev babel-core 按回车健,运行如下: 2.配置文件.babelrc 在项目根目

es6 babel转码器安装配置

例如:桌面上新建个文件夹es6,文件夹里新建一个文件es6.js.(iOS系统里安装的,windows还没安装过) 打开小黑窗进入文件夹.(windows要以管理员的方式打开cmd) 1.先全局安装babel-cli,输入命令 sudo npm install babel-cli -g (windows去掉sudo) 2.输入cd Desktop/es6 ; ---(进去文件夹) 3.输入 npm init: 一路回车键 ---(引导你创建一个package.json文件,包括名称.版本.作者这

最简单的基于FFmpeg的移动端例子:Android 转码器

本文记录一个安卓平台下基于FFmpeg的视频转码器.该转码器实际上移植自ffmpeg工程中的ffmpeg.c源代码.有关ffmpeg.c的源代码可以参考文章<ffmpeg.c函数结构简单分析(画图)>,在这里就不重复记录了. 源代码 项目的目录结构如图所示.Java源代码位于src目录,而C代码位于jni目录. Android程序Java端代码位于src\com\leixiaohua1020\sffmpegandroidtranscoder\MainActivity.java,如下所示. /*

最简单的基于FFmpeg的内存读写的例子:内存转码器

上篇文章记录了一个基于FFmpeg的内存播放器,可以使用FFmpeg读取并播放内存中的数据.这篇文章记录一个基于FFmpeg的内存转码器.该转码器可以使用FFmpeg读取内存中的数据,转码为H.264之后再将数据输出到内存.关于如何从内存读取数据,以及如何将数据输出到内存,可以参考文章: ffmpeg 从内存中读取数据(或将数据输出到内存) FFmpeg读写内存的关键点有2个:1.       初始化自定义的AVIOContext,指定自定义的回调函数.2.       自己写回调函数.注意函数

最简单的基于FFmpeg的移动端样例:IOS 视频转码器

===================================================== 最简单的基于FFmpeg的移动端样例系列文章列表: 最简单的基于FFmpeg的移动端样例:Android HelloWorld 最简单的基于FFmpeg的移动端样例:Android 视频解码器 最简单的基于FFmpeg的移动端样例:Android 视频解码器-单个库版 最简单的基于FFmpeg的移动端样例:Android 推流器 最简单的基于FFmpeg的移动端样例:Android 视频转

最简单的基于FFmpeg的移动端例子:IOS 视频转码器

本文记录iOS平台下基于FFmpeg的视频转码器.该转码器实际上移植自ffmpeg工程中的ffmpeg.c源代码.有关ffmpeg.c的源代码可以参考文章<ffmpeg.c函数结构简单分析(画图)>,在这里就不重复记录了. 源代码 项目的目录结构如图所示. 下列C语言文件拷贝自FFmpeg源代码: cmdutils.ccmdutils.hcmdutils_common_opts.hconfig.hffmpeg.hffmpeg_filter.cffmpeg_opt.c 此外在编译ffmpeg.c