babel 相关

[dailynodejs]

stage 0 之类

@babel/preset-stage-0 As of v7.0.0-beta.55, we've removed Babel's Stage presets.

Please consider reading our blog post on this decision for more details. TL;DR is that it's more beneficial in the long run to explicitly add which proposals to use.

地址说明: @babel/preset-stage-0

[dailynodejs]

@babel/parser

官网地址：https://babeljs.io/docs/en/babel-parser 解析源码成 AST，对应的 parse 阶段

源码地址：https://github.com/babel/babel/tree/main/packages/babel-parser

A javascript parser used in Babel

之前叫 Babylon，基于 acorn 和 acorn-jsx

与 acorn 在 parse 的区别

• acorn parse 出的 AST 只有 Literal（字面量）类型，不区分具体是字符串、数字 or 布尔值等
• babel parser 细化了：

地址：https://github.com/babel/babel/blob/main/packages/babel-parser/ast/spec.md#literals

1、RegExpLiteral 2、NullLiteral

interface NullLiteral <: Literal {
  type: "NullLiteral";
}

3、StringLiteral

interface StringLiteral <: Literal {
  type: "StringLiteral";
  value: string;
}

4、BooleanLiteral

interface BooleanLiteral <: Literal {
  type: "BooleanLiteral";
  value: boolean;
}

5、NumericLiteral

interface NumericLiteral <: Literal {
  type: "NumericLiteral";
  value: number;
}

6、BigIntLiteral 7、DecimalLiteral

[dailynodejs]

@babel/traverse

遍历AST 调用 visitor 函数，对应 transform 阶段

官网地址：https://babeljs.io/docs/en/babel-traverse

[dailynodejs]

@babel/types

contains methods for building ASTs manually and for checking the types of AST nodes.

typesVersions

https://github.com/babel/babel/blob/main/packages/babel-types/package.json

"name": "@babel/types",
"types": "lib/index-legacy.d.ts",
"typesVersions": {
    ">=3.7": {
      "lib/index-legacy.d.ts": [
        "lib/index.d.ts"
      ]
    }
}

ts 会解析 package.json，先看 typesVersions 字段，如果是 3.7或以上版本，我们从 @babel/types 中导入，会尝试从 [...]/node_modules/@babel/types/lib/index.d.ts

参考地址：https://www.tslang.cn/docs/release-notes/typescript-3.1.html

[dailynodejs]

@babel/core

官网地址：https://babeljs.io/docs/en/babel-core#options

[dailynodejs]

@babel/template

将字符串转换为 ast

[dailynodejs]

@babel/code-frame

Generate errors that contain a code frame that point to source locations

依赖：@babel/highlight

源码地址：https://github.com/babel/babel/blob/main/packages/babel-code-frame/package.json

文档地址：https://babeljs.io/docs/en/babel-code-frame

方法 codeFrameColumns

import {
  codeFrameColumns
} from '@babel/code-frame'

参数如下：

• rawLines
• location
• options

都是可选：

1、highlightCode 默认 false 2、linesAbove 默认 2 3、linesBelow 默认 3 4、forceColor 默认 false 5、message 默认空

type NodeLocation = {
  end?: Location;
  start: Location;
}

interface Options {
  highlightCode?: boolean;
  linesAbove?: number;
  linesBelow?: number;
  forceColor?: boolean;
  message?: string
}

export default function (
  rawLines: string,
  lineNumber: number,
  colNumber?: number | null,
  opts: Options = {}
): string {

  colNumber = Math.max(colNumber, 0)

  const location: NodeLocation = {
    start: {
      column: colNumber,
      line: lineNumber
    }
  }
  return codeFrameColumns(rawLines, location, opts)
}

demo 地址：https://npm.runkit.com/%40babel%2Fcode-frame

[dailynodejs]

@babel/highlight

源码地址：https://github.com/babel/babel/tree/main/packages/babel-highlight

依赖了 js-tokens、chalk

type Options = {
  forceColor?: boolean
}
export default function highlight(code: string, options: Options = {}): string {
  if (shouldHighlight(options)) {
    const chalk = getChalk(options);
    const defs = getDefs(chalk);
    return highlightTokens(defs, code);
  } else {
    return code
  }
}

shouldHighlight 函数

import Chalk from 'chalk'
function shouldHighlight(options: Options): boolean {
  return !!Chalk.supportsColor || options.forceColor;
}

js-tokens 的 demo：https://npm.runkit.com/js-tokens

var jsTokens = require("js-tokens")
var text = `class Foo {
  constructor() {
    console.log("hello");
  }
}`
for (const token of jsTokens(text, { jsx: true })) {
 console.log(token)
}

[dailynodejs]

@babel/helpers

[dailynodejs]

@babel/helper-get-function-arity

源码地址：https://github.com/babel/babel/blob/main/packages/babel-helper-get-function-arity/src/index.ts

import * as t from '@babel/types'

export default function (node: t.Function): number {
  const params = node.params
  for (let i = 0; i < params.length; i++) {
    const param = params[i]
    if (t.isAssignmentPattern(param) || t.isRestElement(param)) {
       return i
    }
  }  
  return params.length
}

[dailynodejs]

参考文章：《从 0 到 1 手写 babel》思路分享