关于babel官网的学习

时间:2021-03-22 02:03:07

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

为什么要有babel呢?

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

关于babel官网的学习

怎么使用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 插件手册