Web前端最全＜Babel＞ 前端语言的巴别塔_@babel standalone，高级开发面试题及答案java

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

Babel Monorepo架构体系

@babel/core

@babel/core 是 Babel 实现转换的核心

它可以根据配置，进行源码的编译转换：

var babel = require("@babel/core");

babel.transform(code, options, function(err, result) {
  result; // => { code, map, ast }
});

@babel/cli

@babel/cli 是 Babel 提供的命令行，它可以在终端中通过命令行方式运行，编译文件或目录。
我们简单说一下它的实现原理：
@babel/cli 使用了 commander 库搭建基本的命令行开发。

以编译文件为例，其关键部分源码如下：

import \* as util from "./util";
const results = await Promise.all(
  _filenames.map(async function (filename: string): Promise<Object> {
    let sourceFilename = filename;
    if (cliOptions.outFile) {
      sourceFilename = path.relative(
        path.dirname(cliOptions.outFile),
        sourceFilename,
      );
    }
    // 获取文件名
    sourceFilename = slash(sourceFilename);
    try {
      return await util.compile(filename, {
        ...babelOptions,
        sourceFileName: sourceFilename,
        // 获取 sourceMaps 配置项
        sourceMaps:
          babelOptions.sourceMaps === "inline"
            ? true
            : babelOptions.sourceMaps,
      });
    } catch (err) {
      if (!cliOptions.watch) {
        throw err;
      }
      console.error(err);
      return null;
    }
  }),
);

util.compile

在上述代码中，@babel/cli 使用了util.compile方法执行关键的编译操作，该方法定义在 babel-cli/src/babel/util.js

babel-cli/src/babel/util.js代码解析：

import \* as babel from "@babel/core";
// 核心编译方法
export function compile(
  filename: string,
 opts: Object | Function,
): Promise<Object> {
  // 编译配置
  opts = {
    ...opts,
    caller: CALLER,
  };
  return new Promise((resolve, reject) => {
    // 调用 transformFile 方法执行编译过程
    babel.transformFile(filename, opts, (err, result) => {
      if (err) reject(err);
      else resolve(result);
    });
  });
}

由此可见，@babel/cli 负责获取配置内容，并最终依赖了 @babel/core 完成编译。

也可以在 @babel/cli 的 package.json 中找到线索：

"peerDependencies": {
    "@babel/core": "^7.0.0-0"
},

@babel/core 是 @babel/cli 的关键依赖，@babel/core 提供了基础的编译能力。

@babel/standalone

可以在非 Node.js 环境（比如浏览器环境）自动编译含有 text/babel 或 text/jsx 的 type 值的 script标签，并进行编译

如下面代码：

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
    const getMessage = () => "Hello World";
    document.getElementById('output').innerHTML = getMessage();
</script>

@babel/standalone的核心代码与@babel/core的关系：

import {
  transformFromAst as babelTransformFromAst,
  transform as babelTransform,
  buildExternalHelpers as babelBuildExternalHelpers,
} from "@babel/core";

所以，@babel/standalone也是基于@babel/core而产生的应用。@babel/standalone可以在浏览器中直接执行，因此这个包对于浏览器环境动态插入高级语言特性的脚本、在线自动解析编译非常有意义。我们知道的 Babel官网也用到了这个包，JSFiddle、JS Bin 也都是 @babel/standalone 的受益者。

以上介绍的@babel/standalone、@babel/cli可以说都是基于@babel/core的能力而衍生的应用，那@babel/core又基于哪些babel基础包搭建的核心能力呢？

@babel/core的组成

• @babel/parser
• @babel/code-frame
• @babel/generator
• @babel/traverse
• @babel/types
• …(等包提供基础的AST处理能力)

@babel/parser

@babel/parser 的实现主要依赖并参考了 acorn 和 acorn-jsx

典型用例：

require("@babel/parser").parse("code", {
  sourceType: "module",
  plugins: [
    "jsx",
    "flow"
  ]
});

parse源码分析：

export function parse(input: string, options?: Options): File {
  if (options?.sourceType === "unambiguous") {
    options = {
      ...options,
    };
    try {
      options.sourceType = "module";
      // 获取相应的编译器
      const parser = getParser(options, input);
      // 使用编译器将源代码转为 ast
      const ast = parser.parse();
      if (parser.sawUnambiguousESM) {
        return ast;
      }
      if (parser.ambiguousScriptDifferentAst) {
        try {


### 最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/c8b78d7d7a798f2ff4eea9fd83a35330.webp?x-oss-process=image/format,png)

![](https://img-blog.csdnimg.cn/img_convert/5fe6d9f84e127d995d98b1f1451cf034.webp?x-oss-process=image/format,png)



        try {


### 最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-pF1KCG64-1715898503050)]

[外链图片转存中...(img-lnxCxI6H-1715898503051)]