关于babel官网的学习

提起babel，前端er大概都不陌生。但是为什么要有babel呢？解决了什么问题？怎么使用babel呢？注意点在哪？以下就从这几个方面总结一下我关于babel学习的结果吧。

为什么要有babel呢？

距离ES2015提出已经有几年了，各个浏览器厂商也在积极地支持着各个好用的ES6的新特性和新语法。但是还有许多的东西还是不支持的。所以这个时候就需要有一个编译器，把ES6+的语法转换成<=ES5的语法。

怎么使用babel呢？

• 安装babel相关的库

yarn add @babel/core @babel/cli @babel/preset-env -D
yarn add @babel/polyfill

• 配置好babel.config.js或者.babelrc(只需要配置一个就行)
  
  babel.config.js

  module.exports = function(api) {
    api.cache(true); // 这句要加上
    const presets = [
      [
        "@babel/env",
        {
          targets: {
            // ie: '9',
            edge: "17",
            firefox: "60",
            chrome: "67",
            safari: "11.1",
          },
          useBuiltIns: "usage",
        },
      ],
    ];
    const plugins = [
      ["@babel/plugin-transform-arrow-functions", { "spec": true }]
    ];
    return {
      presets,
      plugins
    }
  };
  

  const presets = [
  [
    "@babel/env",
    {
      targets: {
        // ie: '9',
        edge: "17",
        firefox: "60",
        chrome: "67",
        safari: "11.1",
      },
      useBuiltIns: "usage",
    },
  ],
  ];
  const plugins = [
  ["@babel/plugin-transform-arrow-functions", { "spec": true }]
  ];
  

module.exports = {

presets,

plugins

};

  .babelrc
  ```js
  {
    "presets": [
      [
        "@babel/preset-env",
        {
          "targets": {
            // ie: '9',
            "edge": "17",
            "firefox": "60",
            "chrome": "67",
            "safari": "11.1",
          },
          "useBuiltIns": "usage",
        },
      ]
    ],
    "plugins": [
      "@babel/plugin-transform-arrow-functions"
    ]
  }

注意点在哪？

Trying to build Jest is throwing “Caching was left unconfigured.”

怎么写一个babel插件

Babel 插件手册