Babel

Posted 2023-06-02 转角90

Babel的作用

将ES6+、TS、React等转换成普通的js代码，供浏览器识别

Babel命令行使用

单独使用

• @babel/core
• @babel/cli
• @babel/plugin-transform-block-scoping: 块级作用域插件
• @babel/plugin-transform-arrow-function: 箭头函数插件

npx babel ./src  --out-dir ./build --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-function
# 将当前src目录下的文件进行转换，输出到build文件夹中，转换规则--plugins

• @babel/preset-env：预设preset，需要转换的过多时

npx babel ./src/ --out-dir ./build --presets=@babel/preset-env

Babel底层原理

可以将Babel看作是一个编译器

工作流程

• 解析阶段
  • 词法分析
  • 语法分析
• 转换阶段
  • AST抽象语法树
  • 运用各种plugin
  • 生成一个新的AST
• 生成阶段
  • 代码生成输出阶段

`@babel/runtime` 和 `@babel/plugin-transform-runtime` 版本

【中文标题】`@babel/runtime` 和 `@babel/plugin-transform-runtime` 版本

【英文标题】：`@babel/runtime` and `@babel/plugin-transform-runtime` versions

【发布时间】：2019-01-05 16:12:03

【问题描述】：

@babel/runtime 和 @babel/plugin-transform-runtime 是否应该在同一个版本上（例如，两个 7.2.0 完全相同）？或者我可以（作为库作者）将@babel/runtime 依赖项指定为^7.0.0，同时拥有最新的@babel/plugin-transform-runtime？

我知道在 Babel 7 的 beta 版本期间，beta.56（请参阅https://***.com/a/51686837/2148762）发生了重大变化，但我猜当前的稳定版本应该不再是这种情况？

我问这个的原因是我理想地希望来自@babel/runtime 的助手在不同的包之间共享，并且对我来说保持版本范围开放似乎是个好主意。但与此同时，我不确定我应该降到多低（^7.0.0 或^7.2.0），以及@babel/runtime 和@babel/plugin-transform-runtime 之间是否存在关于版本号的隐含合同。

【参考方案1】：

默认情况下，@babel/plugin-transform-runtime 只允许输出对 @babel/runtime 的引用，这些引用在 ^7.0.0 上工作，因为它不知道您要使用什么版本，并且做任何其他事情都会导致很多问题用户。这意味着您想做的事情是安全的。这样做的缺点是，如果我们继续添加新的助手，您的代码将无法利用它们的 @babel/runtime 版本（因为您可能仍在使用没有它们的 @babel/runtime 版本.

如果您想专门使用自 7.0.0 以来可能已添加到 Babel 的帮助器，用户可以在转换的参数中指定 version，例如

  "plugins": [
    ["@babel/plugin-transform-runtime",  version: "^7.2.0" ],
  ]

然后将要求您在 package.json 中包含 "@babel/runtime": "^7.2.0"。

例如，由于直到 Babel 7.1.5 才支持更新的装饰器提案，如果您使用 transform-runtime 和非legacy 装饰器，装饰器助手仍将插入到您使用的每个文件中装饰器，而不是从 @babel/runtime 导入它。要获取共享助手，您需要在 transform-runtime 的选项中指定 version: "^7.1.5"。

我能否（作为库作者）将 @babel/runtime 依赖项指定为 ^7.0.0，同时拥有最新的 @babel/plugin-transform-runtime？

是的，这是安全的。

我猜现在的稳定版本应该不再是这种情况了？

正确，这个问题是因为人们没有考虑到 beta 版本。