1、@babel/core 它是一个核心模块

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

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

2、@babel/cli, 它是一个终端运行工具, 内置的插件,运行你从终端使用babel的工具 ‘-d’ === ‘–out-dir’

• 给package.json中配置一段脚本命令: 运行npm run build 会在lib文件下面创建index.js ```JS { “name”: “babel-DEMO”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: {
• “build”: “babel src -d lib” }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: {
• “@babel/cli”: “^7.8.4”,
• “@babel/core”: “^7.8.4” } }

   ### 3、plugins 插件  @babel/plugin-transform-arrow-functions  意思是读取src下面js 文件将其高价语法转成ES5语法
  ```JS
    const fn = ()=> 1
    //transform 
    'use strict'
    const fn = function() {
      return 1;
    }
  

  4、Presets 预置 @babel/preset-env 如果想要转换ES6+的其它代码为ES5, 我们可以使用”preset”来代替预先设定的一组插件, 而不是逐一添加我们想要的所有插件.

5、配置在项目的根目录下创建一个babel.config.js文件:

const presets = [
    [
        "@babel/env",
        {
            targets: {
                edge: "17",
                firefox: "60",
                chrome: "67",
                safari: "11.1",
            },
        },
    ],
];

module.exports = { presets };

6、Polyfill 如果某个浏览器不支持Array.inclues()方法, 所以如果你强行使用并不能达到预期的效果,而polyfill的作用正是如此, 知道你的环境不允许, 那就帮你引用一个这个环境, 也就是说此时编译后的代码如下：

// 原来的代码
var hasTwo = [1, 2, 3].includes(2);

// 加了polyfill之后的代码
require("core-js/modules/es7.array.includes");
require("core-js/modules/es6.string.includes");
var hasTwo = [1, 2, 3].includes(2);