概念
Babel是一个ES6转码器。
原理
Babel 的工作原理就是先将 ES6 源码转换为 AST,然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST,最后利用 ES5 的 AST 生成 JavaScript 源代码。
命令行转码
npm install --global babel-cli
babel 提供babel-cli工具 用于命令行转码
用法:
转码结果写入一个文件
--out-file / -o
babel a.js -o b.js
整个目录转码
--out-dir / -d
babel src -d lib
babel-node
babel-cli工具自带一个babel-node命令 提供了一个支持ES6的REPL环境
REPL:Read Eval Print Loop:交互式解释器 类似shell 可以用来调试js代码
执行babel-node可以进入REPL环境 可以直接运行ES6代码
babel-register
babel-register模块改写了require命令 为其加上了一个钩子
每当使用require加载后缀为.js .jsx .es .es6文件时 就会先用babel进行转码
npm install --save-dev babel-register
使用时必须先加载babel-register
require('babel-register')
require('./index.js')
babel-core
如果某些代码需要调用babel的API进行转码 则要使用babel-core模块
npm install babel-core --save
在项目中:
let babel = require('babel-core')
字符串转码:
options为配置对象
babel.transform('code();',options);
文件转码:(同步/异步)
babel.transformFile('filename.js',options,function(err,result){
})
babel.transformFileSync('filename.js',options)
babel-polyfill
polyfill:
Polyfill 是一块代码(通常是 Web 上的 JavaScript),用来为旧浏览器提供它没有原生支持的较新的功能。
babel默认只转换新的js句法,而不转换新的API。
如果想让这个api运行 就必须使用babel-polyfill为当前环境提供一个垫片
使用方法:
npm install babel-polyfill --save
脚本头部:
import 'babel-polyfill' / require('babel-polyfill')
笔记内容整理来自阮一峰老师的《ES6标准入门》