Babel 入门教程学习笔记


Posted in Javascript onJune 13, 2018

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。

Babel 入门教程学习笔记

这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。下面是一个例子。

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

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

上面的原始代码用了箭头函数,这个特性还没有得到广泛支持,Babel将其转为普通函数,就能在现有的JavaScript环境执行了。

一、配置文件.babelrc

Babel的配置文件是.babelrc,存放在项目的根目录下。使用Babel的第一步,就是配置这个文件。

该文件用来设置转码规则和插件,基本格式如下。

{
 "presets": [],
 "plugins": []
}

presets字段设定转码规则,官方提供以下的规则集,你可以根据需要安装。

# 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工具和模块的使用,都必须先写好.babelrc

二、命令行转码babel-cli

Babel提供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转码。这意味着,如果项目要运行,全局环境必须有Babel,也就是说项目产生了对环境的依赖。另一方面,这样做也无法支持不同项目使用不同版本的Babel。

一个解决办法是将babel-cli安装在项目之中。

# 安装
$ npm install --save-dev babel-cli

然后,改写package.json。

{
 // ...
 "devDependencies": {
  "babel-cli": "^6.0.0"
 },
 "scripts": {
  "build": "babel src -d lib"
 },
}

转码的时候,就执行下面的命令。

$ npm run build

三、babel-node

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

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

$ babel-node
> (x => x * 2)(1)
2

babel-node命令可以直接运行ES6脚本。将上面的代码放入脚本文件es6.js,然后直接运行。

$ babel-node es6.js
2

babel-node也可以安装在项目中。

$ npm install --save-dev babel-cli

然后,改写package.json。

{
 "scripts": {
  "script-name": "babel-node script.js"
 }
}

上面代码中,使用babel-node替代node,这样script.js本身就不用做任何转码处理。

四、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");

然后,就不需要手动对index.js转码了。

需要注意的是,babel-register只会对require命令加载的文件转码,而不会对当前文件转码。另外,由于它是实时转码,所以只适合在开发环境使用。

五、babel-core

如果某些代码需要调用Babel的API进行转码,就要使用babel-core模块。

安装命令如下。

$ npm install babel-core --save

然后,在项目中就可以调用babel-core。

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 }

配置对象options,可以参看官方文档http://babeljs.io/docs/usage/options/。

下面是一个例子。

var es6Code = 'let x = n => n + 1';
var es5Code = require('babel-core')
 .transform(es6Code, {
  presets: ['es2015']
 })
 .code;
// '"use strict";\n\nvar x = function x(n) {\n return n + 1;\n};'

上面代码中,transform方法的第一个参数是一个字符串,表示需要转换的ES6代码,第二个参数是转换的配置对象。

六、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');

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

七、浏览器环境

Babel也可以用于浏览器环境。但是,从Babel 6.0开始,不再直接提供浏览器版本,而是要用构建工具构建出来。如果你没有或不想使用构建工具,可以通过安装5.x版本的babel-core模块获取。

$ npm install babel-core@old

运行上面的命令以后,就可以在当前目录的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代码转为ES5,对性能会有影响。生产环境需要加载已经转码完成的脚本。

下面是如何将代码打包成浏览器可以使用的脚本,以Babel配合Browserify为例。首先,安装babelify模块。

$ npm install --save-dev babelify babel-preset-es2015

然后,再用命令行转换ES6脚本。

$ browserify script.js -o bundle.js \
 -t [ babelify --presets [ es2015 react ] ]

上面代码将ES6脚本script.js,转为bundle.js,浏览器直接加载后者就可以了。

在package.json设置下面的代码,就不用每次命令行都输入参数了。

{
 "browserify": {
  "transform": [["babelify", { "presets": ["es2015"] }]]
 }
}

八、在线转换

Babel提供一个REPL在线编译器,可以在线将ES6代码转为ES5代码。转换后的代码,可以直接作为ES5代码插入网页运行。

九、与其他工具的配合

许多工具需要Babel进行前置转码,这里举两个例子:ESLint和Mocha。

ESLint 用于静态检查代码的语法和风格,安装命令如下。

$ npm install --save-dev eslint babel-eslint

然后,在项目根目录下,新建一个配置文件.eslint,在其中加入parser字段。

{
 "parser": "babel-eslint",
 "rules": {
  ...
 }
}

再在package.json之中,加入相应的scripts脚本。

{
  "name": "my-module",
  "scripts": {
   "lint": "eslint my-files.js"
  },
  "devDependencies": {
   "babel-eslint": "...",
   "eslint": "..."
  }
 }

Mocha 则是一个测试框架,如果需要执行使用ES6语法的测试脚本,可以修改package.json的scripts.test。

"scripts": {
 "test": "mocha --ui qunit --compilers js:babel-core/register"
}

上面命令中,--compilers参数指定脚本的转码器,规定后缀名为js的文件,都需要使用babel-core/register先转码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery1.4后 jqDrag 拖动 不可用
Feb 06 Javascript
JS在textarea光标处插入文本的小例子
Mar 22 Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 Javascript
理解JavaScript中worker事件api
Dec 25 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JS闭包、作用域链、垃圾回收、内存泄露相关知识小结
May 16 Javascript
微信小程序 location API实例详解
Oct 02 Javascript
让编辑器支持word复制黏贴、截屏的js代码
Oct 17 Javascript
JavaScript实现的select点菜功能示例
Jan 16 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
微信小程序实现上传多个文件 超过10个
Mar 30 Javascript
vue的$http的get请求要加上params操作
Nov 12 Javascript
Vue中在新窗口打开页面及Vue-router的使用
Jun 13 #Javascript
微信小程序支付功能 php后台对接完整代码分享
Jun 12 #Javascript
js replace 全局替换的操作方法
Jun 12 #Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 #Javascript
js实现购物车功能
Jun 12 #Javascript
浅谈Node.js 中间件模式
Jun 12 #Javascript
浅谈Webpack打包优化技巧
Jun 12 #Javascript
You might like
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
PHP Swoole异步读取、写入文件操作示例
2019/10/24 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
Add a Formatted Table to a Word Document
2007/06/15 Javascript
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
web前端开发也需要日志
2010/12/09 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jQuery取消特定的click事件
2016/02/29 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
Angular ng-repeat 对象和数组遍历实例
2016/09/14 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
MockJs结合json-server模拟后台数据
2020/08/26 Javascript
使用JS实现动态时钟
2020/03/12 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Python时区设置方法与pytz查询时区教程
2013/11/27 Python
在Python中使用元类的教程
2015/04/28 Python
基于Python实现文件大小输出
2016/01/11 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python 用下标截取字符串的实例
2018/12/25 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
2021年值得向Python开发者推荐的VS Code扩展插件
2021/01/25 Python
html5+CSS3+JS实现七夕言情功能代码
2017/08/28 HTML / CSS
搞笑婚礼主持词
2014/03/13 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
小学教师节活动总结
2015/03/20 职场文书
导游词之鲁迅祖居
2019/10/17 职场文书
用Python制作灯光秀短视频的思路详解
2021/04/13 Python
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android
Win11运行育碧游戏总是崩溃怎么办 win11玩育碧游戏出现性能崩溃的解决办法
2022/04/06 数码科技