關於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
};

.babelrcjs
{
"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 插件手冊