es6转码器-babel
babel
基本使用
安装转码规则
ES2015转码规则
$ npm install --save-dev babel-preset-es2015
react转码规则
$ npm install --save-dev babel-preset-react
ES7不同阶段语法提案的转码规则(共有4个阶段),选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3配置.babelrc文件
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}babel-cli使用
//安装
$ npm 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-node使用
babel-cli工具自带一个babel-node命令,提供一个支持ES6的REPL环境。它支持Node的REPL环境的所有功能,而且可以直接运行ES6代码。
$ babel-node es6.js
2babel-register使用
babel-register模块改写require命令,为它加上一个钩子。此后,每当使用require加载.js、.jsx、.es和.es6后缀名的文件,就会先用Babel进行转码。
需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。//安装
$ npm install --save-dev babel-register//例子
require("babel-register");
require("./index.js");babel-core使用
如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。
//安装
$ npm install babel-core --save//例子
var babel = require('babel-core');// 字符串转码
babel.transform('code();', options);
// => { code, map, ast }// 文件转码(异步)
babel.transformFile('filename.js', options, function(err, result) {
result; // => { code, map, ast }
});// 文件转码(同步)
babel.transformFileSync('filename.js', options);
// => { code, map, ast }// Babel AST转码
babel.transformFromAst(ast, code, options);
// => { code, map, ast }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');与其他工具配合使用
mocha
"scripts": {
"test": "mocha --ui qunit --compilers js:babel-core/register"
}
es6转码器-babel的更多相关文章
- ES6转码器babel的使用
1. 进入ES6的项目,执行 npm init // 初始化package.json 2. 在与package.json同一目录下编写配置文件 .babelrc { "presets&quo ...
- 安装es6转码工具babel,具体步骤
新建文件夹:testBabel 全局安装Babel:npm install babel-cli -g //babel的命令会成为全局变量,可以直接使用,一般全局后还要装本地(本工程目录) 初始化:np ...
- ES6标准简介之Babel转码器解说
ES6是ECMAScript 6的简称,是JavaScript语言的下一代标准,现在基于jquery库的前端开发js所使用的标准是ES5(ECMAScript 5).ES6已于2015年6月正式发布. ...
- 使用babel转码器,让浏览器支持es6语法
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,可是很多浏览器并不支持es6语法,所以我们需要一个转码工具, 把es6的语法转换成浏览器支持的javascr ...
- Babel转码器
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以用ES6的方法 编写程序,又不用担心现在环境是否支持.
- Babel 转码器 § es6转换es5
Babel 转码器 § es6转换es5 实时转码 / Repl -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc ...
- ES6入门一:ES6简介及Babel转码器
ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码 1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...
- ES6转ES5(Babel转码器)
ES6转ES5(Babel转码器) 前提:必须在VScode中已经安装了Node.js 官网:https://nodejs.org/en/ 一.安装命令行转码工具 npm install --glob ...
- es6 babel转码器安装配置及常见命令
示例:在d盘,新建文件夹es6,文件夹里新建一个文件es6.js. (1)先全局安装babel-cli,输入命令npm install babel-cli -g (2)输入d:( 进入d盘),再输入c ...
随机推荐
- django-based blog- mezzanine
django-based blog- mezzanine zinnia 博客 hydra 暴力破解
- make clean-kernel && make kernel
当在kernel下使用全编译指令后,回到主目录编译仍然有错,那么需要:在 kernel/include/config:删去该文件夹 make clean-kernel && make ...
- 第四篇 在中国做ERP系统实施你必须知道的一些常识
1. ERP实施要特别从参与全球竞争的视角指引系统建设.中国社会经历了一个从计划经济体制到市场经济体制的转变.中国加入WTO后,要与国际接轨,要按照世界贸易组织有关的贸易规则开展国际贸易.中国的关税与 ...
- leetcode:Coin Change
You are given coins of different denominations and a total amount of money amount. Write a function ...
- STL笔记(1)map
STL笔记(1)map STL之map ZZ from http://hi.baidu.com/liyanyang/blog/item/d5c87e1eb3ba06f41bd576cf.html 1. ...
- Asp.Net保存session的三种方法
C#中保存Session的三种方法及Web.Config设置 1.保存session到sql server,需要指定Sql Server服务器,这种方法因为要读写数据库最慢 <sessionSt ...
- 第三集 欠拟合与过拟合的概念、局部加权回归、logistic回归、感知器算法
课程大纲 欠拟合的概念(非正式):数据中某些非常明显的模式没有成功的被拟合出来.如图所示,更适合这组数据的应该是而不是一条直线. 过拟合的概念(非正式):算法拟合出的结果仅仅反映了所给的特定数据的特质 ...
- Btn要记得对状态进行设置
self.catBtn = [UIButtonbuttonWithType:UIButtonTypeSystem]; self.catBtn.backgroundColor = [UIColorred ...
- 《Write Optimized B-Trees》读书报告
论文原作者:Goetz Graefe, Microsoft.我读完这篇论文后颇有收获,所以写了一篇论文报告,旨在更精炼准确地阐述论文核心思想. 摘要:论文提出了一种方法,这种方法可以优化B树索引写性能 ...
- order by多个字段对索引的影响
某前台sql语句,简化后如下SELECT products_name,products_viewed FROM `products_description` ORDER BY products_vie ...