@babel/core

@babel/core是我们使用Bable进行转码的核心npm包,我们使用的babel-cli、babel-node都依赖这个包,因此我们在前端开发的时候,都需要安装这个包。

在我们的工程目录里,执行下面的命令,安装@babel/core。

  npm install --save-dev @babel/core

对于大部分开发者来说,这一小节的知识到这来就可以结束了,只需要知道Babel转码必须要安装这个包即可。下面的内容会讲解@babel/core自身对外提供的API。

无论我们是通过命令行转码,还是通过webpack进行转码,底层都是通过Node来调用@babel/core相关功能API来进行的。

我们来看一个例子,来看一下Node是如何调用@babel/core的API来进行转译的。例子代码是github工程的babel16。

我们先新建一个index.js文件,这个文件在写完后直接用Node来执行。

  var babelCore = require("@babel/core");
  var es6Code = 'var fn = (num) => num + 2';
  var options = {
    presets: ["@babel/env"]
  };
  var result = babelCore.transform(es6Code, options);
  console.log(result);
  console.log('--------------');
  console.log('--------------');
  console.log(result.code);

我们来看一下这段代码的意思。

第1行我们引入了@babel/core模块,并将模块输出赋值给了变量babelCore。第2行变量es6Code是一个字符串,字符串内容是一个箭头函数,该字符串内容是我们需要转译的代码,这个变量传递给了接下来transform方法的第1个参数。第3行options是一个对象,这个对象传递给了接下来transform方法的第2个参数。最后,我们调用babelCore的transform方法,我们把结果打印在Node的控制台上。为了方便看输出结果,中间用'------'隔开。

babel-core与@babel/core

可以看到,transform后的结果是个对象,该对象的code就是我们转码后的结果。

这就是@babel/core底层的一个调用过程。

transform也可以有第3个参数,第3个参数是一个回调函数,用来对转码后的对象进行进一步处理。@babel/core除了transform这个API,还有transformSync、transformAsync和transformFile等同步异步以及对文件进行转码的API,这里就不展开讲了,用法和上面的transform大同小异。

笔记与思考

    1. @babel/core作为一个核心包,我觉得可以理解为是一个包的集合,js的解析、转换、生成依赖于下面几个包,而@babel/core正是下面的几个包,当然不止这几个,类比@babel/polyfill、@babel/plugin-transform-runtime...
      "@babel/parser": "^7.18.6",
      "@babel/traverse": "^7.18.6",
      "@babel/generator": "^7.18.6",

发表评论

邮箱地址不会被公开。 必填项已用*标注