@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的控制台上。为了方便看输出结果,中间用'------'隔开。
可以看到,transform后的结果是个对象,该对象的code就是我们转码后的结果。
这就是@babel/core底层的一个调用过程。
transform也可以有第3个参数,第3个参数是一个回调函数,用来对转码后的对象进行进一步处理。@babel/core除了transform这个API,还有transformSync、transformAsync和transformFile等同步异步以及对文件进行转码的API,这里就不展开讲了,用法和上面的transform大同小异。
我们把结果打印才Node的控制台上-->我们把结果打印在Node的控制台上
感谢
请问下@babel/core的transform和@babel/traverse是什么关系?转译的过程到底是谁完成的
@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",