在之前学习 Babel 之前，只知道它是一个 JS，大概的功能就是帮助我们在旧的浏览器环境中将 ES6+的代码转换为兼容低版本的 JS代码。但是，它是通过什么实现的，具体是怎样实现的就没有深入了解了。

废话不多说，直接进入主题。本文通过一个案例来打开 Babel这个技能，所以先要准备一个小项目。

mkdir babel-learning && cd babel-learning
npm init -y
mkdir src && cd src
touch index.js

@babel/core

学习 Babel，首先要学习一个叫 @babel/core 的东西，他是 Babel 的核心模块

npm i --save-dev @babel/core

安装成功之后就可以在我们的代码中使用了, 你可以采用CommonJS的引用方式：

const babel = require('@babel/core')
babel.transform('code', options)

这里的知识点有很多, 不过你不用急于的掌握它, 只需要知道它是Babel的核心, 让我们接着往下看。

@babel/cli

这是一个终端运行工具，内置的插件，运行你从终端使用 babel 的工具。同样也需要安装：

npm i --save-dev @babel/cli

接着，在 src/index.js 中写一段简单代码：

const fn = () => 1; // 箭头函数, 返回值为1
console.log(fn());

用法一：命令行的形式

babel src --out-dir lib

这行代码的意思是：它使用我们设置的解析方式来解释 src 目录下的所有 js 文件，并将转换后的每个文件都输出到 lib 目录下。

但是，到目前为止我们并没有设置任何的解析方式，所以在执行这行代码后，能看到项目中多了一个 lib 目录，里面的代码和 src 目录中的是一致的。至于如何设置解析方式，就涉及到后面讲的 plugins 和 presets 了。