读完这篇你还不懂Babel我给你寄口罩

前言
最近在学习webpack, 发现了webpack中一个重要的功能点babel-loader, 于是就想着学习了解一波Babel.
我们在做一件事, 学习一个知识点的时候, 都应该是抱有一个目的去做的.
在你花了大把时间大把精力去学习这个知识的时候, 它能带给你什么 🤔️ ? 能帮助到你什么🤔️ ?

就像我学习Babel一样, 之前一直只知道它是一个JS编译器, 大概功能是能帮我们在旧的浏览器环境中将ES6+代码转换成向后兼容版本的JS代码, 但是其中重要的转换功能是靠什么实现, 以及里面到底有个什么学问是我没深入了解的, 它对我学习webpack有什么帮助?
在这一篇文章中我并没有介绍过于深入的内容, 但是如果把它当成一个入门Babel的教材来看那我相信它对你是有一定帮助的. 不信如果你读完了它之后再去看看官方的文档, 一定觉得都可以看懂了. 不然的话请评论区留下你的地址, 看我给不给你寄口罩…
不拐弯抹角了, 嘻嘻 😁, 让我们看看通过这一章节的阅读你能学习到什么:

@babel/clipluginspresets配置Bablepolyfill
前期准备
学习一个新的知识, 我还是偏向于用案例的的方式来打开讲解它.
所以在正式开始阅读之前, 让我们先来准备一个这样的案例项目:

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

一顿操作之后, 我们新建的项目目录为:

/babel-basic
 |- /src
   |- index.js
 |- package.json

现在package.json是最原始的配置, 而index.js暂时没有写内容.
package.json:

{
  "name": "babel-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {}
}

下面我都将围绕这个babel-basic项目来进行讲解, 我希望你也能在本地准备一个这样的项目案例, 以便你更好的理解我接下来要说的内容.
@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/cli, 它是一个终端运行工具, 内置的插件,运行你从终端使用babel的工具.

同样, 它也需要先安装:

$ npm i --save-dev @babel/cli @babel/core

让我们安装@babel/cli的同时再来安装一下@babel/core,
现在, 让我先在src/index.js中写上一段简单的代码, 并来看看它的基本用法.

src/index.js:

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

用法一: 命令行的形式(在项目根目录执行语句):

$ ./node_modules/.bin/babel src --