从 Babel 到组件按需引入原理

2020/04/20 12:50
阅读数 724

前言

谈到 babel 肯定大家都不会感觉陌生。

  • 桌面端组件库 Element ,借助 babel-plugin-component ,我们可以只引入需要的组件,以达到减小项目体积的目的。
  • 使用 babel-polyfill ,开发者可以立即使用 ES 规范中的最新特性。
  • 有了插件: transform-vue-jsxreact ,我们在 vue 和 react 开发中可以直接使用 JSX 编写模板。

组件能按需引入到底是怎么实现的? Babel 的工作原理是怎样的呢?

带着疑问,我们尝试对其原理深入探索和理解。

Babel 编译的三个阶段

Babel 是一个 JavaScript 编译器。

和大多数其他语言的编译器相似,Babel 的编译过程可分为三个阶段:

  • 解析 Parse :将代码字符串解析成抽象语法树(AST)。简单来说就是对 JS 代码进行词法分析与语法分析。
  • 转换 Transform :对抽象语法树进行转换操作。这里操作主要是添加、更新及移除。
  • 生成 Generate : 根据变换后的抽象语法树再生成代码字符串。

解析 Parse

Babel 会把源代码抽象出来,变成 AST

可以看看 var answer = 6 * 7; 抽象之后的结果。

{
    "type": "Program", // 根结点
    "body": [
        {
            "type": "VariableDeclaration", // 变量声明
            "declarations": [
                {
                    "type": "VariableDeclarator", // 变量声明器
                    "id": {
                        "type": "Identifier",
                        "name": "answer"
                    },
                    "init": {
                        "type": "BinaryExpression", // 表达式
                        "operator": "*", // 操作符是 *
                        "left": {
                            "type": "Literal", // 字面量
                            "value": 6,
                            "raw": "6"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 7,
                            "raw": "7"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}
复制代码

ProgramVariableDeclarationVariableDeclaratorIdentifierBinaryExpressionLiteral 均为节点类型。每个节点都是一个有意义的语法单元。这些节点通过携带的属性描述自己的作用。

其中的所有节点名词,均来源于 ECMA 规范

ATS 生成过程分为两个步骤:

  • 分词:将代码字符串分割成语法单元数组 token
  • 语法分析:分析语法单元之间的关联关系。
分词

JS 中的语法单元主要包括以下这么几种:

  • 关键字: constletvar 等。
  • 标识符:if/elsereturnfunction 等。
  • 运算符:+-*/ 等。
  • 数字
  • 空格
  • 注释

比如下面的代码生成的语法单元数组:

var answer = 6 * 7;

// Tokens
[
    {
        "type": "Keyword",
        "value": "var"
    },
    {
        "type": "Identifier",
        "value": "answer"
    },
    {
        "type": "Punctuator",
        "value": "="
    },
    {
        "type": "Numeric",
        "value": "6"
    },
    {
        "type": "Punctuator",
        "value": "*"
    },
    {
        "type": "Numeric",
        "value": "7"
    },
    {
        "type": "Punctuator",
        "value": ";"
    }
]
复制代码

分词的大致思路:遍历字符串,通过各种方式(如:正则)匹配当前字符串片段对应的语法单元类型,然后生成数组 token

语法分析

先了解语法分析的两个概念:

  • 语句:指一个具备边界的代码区域,相邻的两个语句之间从语法上来讲互不影响,即使调换顺序也不会产生语法错误。
  • 表达式:指最终有个结果的一小段代码,它可以嵌入到另一个表达式,且包含在语句中。

语法分析就是识别语句和表达式,这是一个递归的过程(理解为深度优先遍历)。Babel 会在解析过程中设置一个暂存器,用来暂存当前读取到的语法单元,如果解析失败,就会返回之前的暂存点,再按照另一种方式进行解析,如果解析成功,则将暂存点销毁,不断重复以上操作,直到最后生成对应的语法树。

转换 Transform

Plugins

插件应用于 Babel 的转译过程。如果不使用任何插件,那么 Babel 会原样输出代码。

Presets

Babel 官方已经针对常用环境编写了一些 preset

Preset 的路径:

如果 presetnpm 上,你可以输入 preset 的名称,Babel 将检查是否已经将其安装到 node_modules 目录下了

{
  "presets": ["babel-preset-myPreset"]
}
复制代码

你还可以指定指向 preset 的绝对或相对路径。

{
  "presets": ["./myProject/myPreset"]
}
复制代码

Preset 的排列顺序:

Preset 是逆序排列的(从后往前)。

{
  "presets": [
    "a",
    "b",
    "c"
  ]
}
复制代码

将按如下顺序执行: cb 然后是 a

这主要是为了确保向后兼容,由于大多数用户将 es2015 放在 stage-0 之前。

生成 Generate

babel-generator 通过 AST 树生成 ES5 代码。

实现一个简单的按需打包功能

例如 ElementUI 中把 import { Button } from 'element-ui' 转成 import Button from 'element-ui/lib/button'

可以先对比下 AST

// import { Button } from 'element-ui'
{
    "type": "Program",
    "body": [
        {
            "type": "ImportDeclaration",
            "specifiers": [
                {
                    "type": "ImportSpecifier",
                    "local": {
                        "type": "Identifier",
                        "name": "Button"
                    },
                    "imported": {
                        "type": "Identifier",
                        "name": "Button"
                    }
                }
            ],
            "source": {
                "type": "Literal",
                "value": "element-ui",
                "raw": "'element-ui'"
            }
        }
    ],
    "sourceType": "module"
}

// import Button from 'element-ui/lib/button'
{
    "type": "Program",
    "body": [
        {
            "type": "ImportDeclaration",
            "specifiers": [
                {
                    "type": "ImportDefaultSpecifier",
                    "local": {
                        "type": "Identifier",
                        "name": "Button"
                    }
                }
            ],
            "source": {
                "type": "Literal",
                "value": "element-ui/lib/button",
                "raw": "'element-ui/lib/button'"
            }
        }
    ],
    "sourceType": "module"
}
复制代码

可以发现, specifierstypesourcevalue、raw 不同。

然后 ElementUI 官方文档中,babel-plugin-component 的配置如下:

// 如果 plugins 名称的前缀为 'babel-plugin-',你可以省略 'babel-plugin-' 部分
{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
复制代码

直接干:

import * as babel from '@babel/core'

const str = `import { Button } from 'element-ui'`
const { result } = babel.transform(str, {
    plugins: [
        function({types: t}) {
            return {
                visitor: {
                    ImportDeclaration(path, { opts }) {
                        const { node: { specifiers, source } } = path
                        // 比较 source 的 value 值 与配置文件中的库名称
                        if (source.value === opts.libraryName) {
                            const arr = specifiers.map(specifier => (
                                t.importDeclaration(
                                
                                    [t.ImportDefaultSpecifier(specifier.local)],
                                    // 拼接详细路径
                                    t.stringLiteral(`${source.value}/lib/${specifier.local.name}`)
                                )
                            ))
                            path.replaceWithMultiple(arr)
                        }
                    }
                }
            }
        }
    ]
})

console.log(result) // import Button from "element-ui/lib/Button";
复制代码

完美!我们的第一个 Babel 插件完成了。

大家有没有对 Babel 有自己的理解了呢?

感谢

如果本文对你有帮助,就点个赞支持下吧!感谢阅读。

展开阅读全文
加载中

作者的其它热门文章

打赏
0
0 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部
返回顶部
顶部