【Babel 极速指南】

作者: 一俢 | 来源:发表于2019-04-15 10:01 被阅读32次

Babel 是一个 JavaScript 编译器,即使你将代码运行在不支持最新 JavaScript 语法的浏览器或者 Node 环境中,它也可以让你在编写程序的过程中使用最新 JavaScript 语法。它提供了丰富的工具让你可以享受到最新版本的 JS,这种从 “源代码到源代码” 的编译被称为转换编译

Babel 的构成

  • 核心包
    • babel-core:转换器核心,调度解析器、翻译器、生成器等
    • babylon:JS 词法解析器,生成 AST(抽象语法树)
    • babel-traverse:遍历 AST
    • babel-generator:根据 AST 生成代码
  • 工具包
    • babel-types
    • babel-template
    • babel-helpers
    • babel-register
    • babel-plugin-xxx
    • babel-polyfill
    • babel-runtime

工作原理

Babel 实质上是一个转换编译器,它会把高版本的语言翻译成低版本语言,虽然并不像编译器那样将一种高级语言翻译成另外一种语言,但是它在转换的过程也分三个阶段:parsing -> transforming -> generating,以 ES6 代码转换成 ES5 代码为例:

  • babylon 将 ES6 代码 解析成 AST
  • babel-traverse 对 AST 进行翻译,得到 ES5 的 AST
  • babel-generator 通过 AST 生成 ES5 代码
babel-compile.png

注意:Babel 只会对新的语法进行翻译,例如:ES6 的箭头函数、 let 声明 等等。但是新的功能或者API,例如:Promise、Set 等 这些都不会翻译。需要我们自己来引入 polyfill 来解决。

AST 抽象语法树

AST:抽象语法树(Abstract Syntax Tree),指的是源代码语法所对应的树状结构。直接上例子,下图就是代码转向 AST 的过程:

babel-ast.png

用 JSON 表达出来如下:

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "msg"
                    },
                    "init": {
                        "type": "Literal",
                        "value": "Hello world",
                        "raw": "\"Hello world\""
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "ExpressionStatement",
            "expression": {
                "type": "BinaryExpression",
                "operator": "+",
                "left": {
                    "type": "Identifier",
                    "name": "msg"
                },
                "right": {
                    "type": "Literal",
                    "value": "!",
                    "raw": "\"!\""
                }
            }
        }
    ],
    "sourceType": "script"
}

如何使用?

Babel 提供了很多的使用方式,例如:直接引入 babel 脚本让浏览器环境支持最新语法;或者在服务器上全局安装 Babel CLI,让服务器端支持最新语法;当然比较常用的是在构建工具中使用,让代码在转换编译的过程中让其支持最新语法。下面以 Webpack 为例:

  • 安装:
npm install --save-dev babel-loader babel-core
  • 配置 Webpack 构建工具:
module: {
    rules: [
        { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
    ]
}
  • 创建 .babelrc 配置文件
    配置好后,其实它并没有真的生效,需要在项目中创建 .babelrc 文件并启用一些插件。

首先,我们可以使用转换 ES2015+ 的 env preset:

npm install babel-preset-env --save-dev

为了让 preset 生效,你需要像下面这样定义你的 .babelrc 文件:

{
  "presets": ["env"]
}

presets

配置各种插件是一件非常痛苦的事情,其实 presets 就是各个插件的集合,它可以根据当前的运行环境,自动确定我们需要的插件和polyfills,我们只需要配置需要支持的浏览器和相关版本就行了。

{
    "presets": [
        ["env", {
            "targets": {
                "browsers": ["last 2 versions", "safari >= 7"]
            }
        }]
    ]
}

具体参考文档:https://babeljs.cn/docs/plugins/preset-env

babel-polyfill

babel-polyfill 会将 ES2015+ 环境整个引入到你的代码环境中,也就是说你可以直接在代码中使用全新原生对象和API。如果使用,你可以选择在程序入口全部引入,或者通过构建工具按需引入。

具体参考文档:https://babeljs.cn/docs/usage/polyfill/

〖坚持的一俢〗

相关文章

  • 【Babel 极速指南】

    Babel 是一个 JavaScript 编译器,即使你将代码运行在不支持最新 JavaScript 语法的浏览器...

  • 【React Native 极速指南】App 发布

    回顾前几篇: 《【React Native 极速指南】开发环境》 《【React Native 极速指南】基础篇》...

  • Babel 入门指南

    Babel 入门指南 ​:warning: 注意:Babel 可以与很多构建工具(如 Browserify、Gru...

  • 如何配置 babel

    在此之前你需要首先了解一下什么是babel,以及babel的使用指南;如果你需要其他babel的版本,还请参考[h...

  • 极速阅读指南

    我是七七四十七,发现极速阅读这个宝,就想你好我好大家好。 主要分四部分分享: 第一,为什么要进行阅读?第二,极速阅...

  • 【Vuex 极速指南】

    在这篇文章,你将快速学习到: 如何安装 什么是 Vuex Hello World 核心概念StatemapStat...

  • TypeScript 极速指南

    TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向...

  • 垃圾分类-极速查询垃圾分类指南隐私政策

    隐私政策 生效日期:2019年7月2日 垃圾分类-极速查询垃圾分类指南(“我们”,“我们”或“我们的”)是一款极速...

  • 极速萌新指南

    先说几句 极速是一个PT站,那么什么是PT站? 简而言之,普通下载就是大家一起找下载服务器要东西,BT下载是大家互...

  • Jest - 异步例子

    首先,按照入门指南中的文档,在 Jest 中启用 Babel 支持。 让我们实现一个简单的模块,它从 API 获取...

网友评论

    本文标题:【Babel 极速指南】

    本文链接:https://www.haomeiwen.com/subject/dlvywqtx.html