babel 常见用法

1. babel 5.x 和babel 6.x

babel 5.x -> 6.x 的变化非常大,15 年 11 月,Babel 发布了 6.0 版本。相较于前一代 Babel 5,新一代 Babel 更加模块化, 将所有的转码功能以插件的形式分离出去,默认只提供 babel-core,babel-cli两个不同方式的转换平台。原本只需要装一个 babel ,现在必须按照自己的需求配置,灵活性提高的同时也提高了使用者的学习成本。

2. babel 5.x

babel 5.x包囊括了整个编译器、所有的转换器以及一个CLI工具, 这么做的缺点就是它会导致很多不必要的下载,并且代码也令人困惑,灵活性也很差。

3. babel 6.x

babel 6.x已经不存在babel包了,转而代之的是babel-cli和babel-core两个包。babel-cli是用于命令行的代码转换,而babel-core是用于项目编译环境。

4. babel-cli

安装babel-cli(用于在终端使用babel )######
npm install -g babel-cli
然后安装babel-preset-es2015插件集######
npm install --save babel-preset-es2015
在命令行输入:######
babel es6.js --presets es2015
输出:######
"use strict";

[1, 2, 3].map(function (x) {
  return x * x;
});
.babelrc#####

命令行中,我们可以发现都会带有相关插件参数,也可以在.babelrc文件中配置:

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

5. AST(抽象语法树)

如果对于源代码而言,AST就是源代码的抽象语法结构的树状表现形式。举个例子说明:

源代码:####

let a = "hello";
let b = a;

转换后的AST:####

# of nodes: 9
# of tokens: 10
Tokens:
Keyword(let) Identifier(a) Punctuator(=) String("hello") Punctuator(;)
Keyword(let) Identifier(b) Punctuator(=) Identifier(a) Punctuator(;)

6. babel-core:

babel-core 的作用是把 js 代码分析成 ast ( 抽象语法树 ,是源代码的抽象语法结构的树状表现形式),方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的,如箭头函数,rest 参数,函数默认值等,这种语言层面的不兼容只能通过将代码转为 ast,分析其语法后再转为低版本 js。首先安装 babel-core

安装 babel-core####

npm install babel-core

引入 babel-core####

var babel = require("babel-core");

字符串形式的 JavaScript 代码编译####

var result = babel.transform("code();", {plugins:[],preset:{}...});
         result.code;//
         result.map;//
         result.ast;//

如果是文件的话,可以使用异步 api:####

var result = babel.transformFile("filename.js", {plugins:[],preset:{}...}, function(err, result) {
          result.code;//
          result.map;//
          result.ast;//
});

如果是文件的话,也可以使用同步 api####

var result = babel.transformFile("filename.js", {plugins:[],preset:{}...});
          result.code;//
          result.map;//
          result.ast;//

7. babel 配置:

你或许已经注意到了,目前为止通过运行 Babel 自己我们并没能“翻译”代码,而仅仅是把代码从一处拷贝到了另一处。这是因为我们还没告诉 Babel 要做什么。你可以通过安装插件(plugins)或预设(presets,也就是一组插件)来指示 Babel 去做什么事情。

.babelrc 插件配置#####

接下来我们要让babel去把es6语法翻译为浏览器可以识别的es5语法。比如箭头函数和常量,所以我们给它添加了两个插件:babel-plugin-transform-es2015-arrow-functions,babel-plugin-transform-es2015-constants

{
  "presets": [],
  "plugins": ["transform-es2015-arrow-functions","babel-plugin-transform-es2015-constants"]
}

此时,babel就可以转换es6的箭头函数和let常量了。但有的时候,我们还需要很多转换,因此插件的数量会越来越多,当然手动配置这些单一特性非常的繁琐,所以babel提供了presets预设,也就是一套插件集。这样就很方便,而无需一个一个插件的安装和设置。目前,插件集有:babel-preset-es2015 ,babel-preset-react。

babel转es6语法####

 npm install --save-dev babel-preset-es2015
{
  "presets": ["es2015"],
  "plugins": []
}

babel转react语法####

 npm install --save-dev babel-preset-react 
{
  "presets": ["react"],
  "plugins": []
}

8. babel-loader:

在webpack中可以使用babel-loader加载器来编译所有的js代码,而无需手动引入babel-core。当然,你也可以把相关插件或者插件集写入.babelrc文件中,具体实现如下:

module: {
  loaders:  [
    {
      test: /\.js/,
      loader: 'babel?presets[]=es2015,presets[]=react,plugins[]=transform-runtime'
    }
  ]
}

9. babel-register:

babel-register 是放在 node 里使用的。它的作用是替代 node 的 require命令,与 node 自身的 require不同,它可以加载 es2015、jsx 等类型文件。有了它,我们就可以在require引入的文件中也可以写es6、jsx,用法如下

require('babel-register')({presets: ['es2015', 'react']})
require('./app')

10. babel-polyfill:

babel 虽然可以转换各种 ES2015 语法及 jsx,但浏览器未提供原生支持的许多功能还是需要 polyfill,比如 Promise。我们只要在代码中引入 babel-polyfill 就可以模拟出一个 ES2015 的环境,用法如下:

安装######
npm install babel-polyfill --save
引入######
import babel-polyfill
webpack中######
entry : {app :  ['babel-polyfill','/app.js']}

11. babel-runtime:

与 babel-polyfill 一样,babel-runtime 的作用也是模拟 ES2015 环境。只不过,babel-polyfill 是针对全局环境的,引入它,我们的浏览器就好像具备了规范里定义的完整的特性 – 虽然原生并未实现。babel-runtime 更像是分散的 polyfill 模块,我们可以在自己的模块里单独引入,比如 require(‘babel-runtime/core-js/promise’),它们不会在全局环境添加未实现的方法,只是,这样手动引用每个 polyfill 会非常低效。我们借助 Runtime transform 插件来自动化处理这一切。至于要用 babel-polyfill 还是 babel-runtime,则需要根据具体需求。举个例子,如果一个库里引用了 babel-polyfill,别人的库也引用了 babel-polyfill,我们很可能会跑两个 babel-polyfill 实例,这里,使用 babel-runtime 会更合适。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容