一文轻松掌握babel

花开花落花中妖
409 阅读2分钟

在进行项目搭建的时候，不可避免的要跟babel进行打交道。由于之前我对于babel的不重视，每次都是靠度娘拉我一把。由于前段时间要利用babel进行开发，所以我下定决心要彻底拿下babel。

废话不多说，上来就是一发入魂。

Babel 是什么？

这里借用一下babel官网的原话

Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

Babel有什么用？

  • 语法转换

  • 通过 Polyfill 方式在目标环境中添加缺失的特性 （通过引入第三方 polyfill 模块）

  • 源码转换

如何进行Babel配置呢？

配置babel一共有三种方式

  • babel.config.json

  • .babelrc

  • @babel/cli

babel.config.json

在项目的根目录（package.json 文件所在的目录）下，创建 babel.config.json 文件

    { 
        "presets": [...], 
        "plugins": [...] 
    }

.babelrc.json

在项目中创建名为 .babelrc.json 的文件

    { 
        "presets": [...], 
        "plugins": [...] 
    }

@babel/cli

    { 
        "sourceFileName": "./src/index.js", 
        "presets": [ "@babel/preset-env" ], 
        "configFile": "./my-config.js", 
        "caller": { 
            "name": "@babel/cli" 
        }, 
        "filename": "./src/index.js" 
    }

权重

三种配置方式之前的权重排序（由小到大） babel.config.json < .babelrc < programmatic options from @babel/cli

babel 配置

presets

  1. babel官方提供的预设

  1. 预设的配置方式

    • 如果不使用任何参数，可以直接通过字符串的方式配置
        {
        "presets": ["presets-A", "presets-B"]
    }
    • 如果配置参数，需要使用数组的方式，第一个参数是预设名称，第二个参数是配置内容
        { 
        "presets": [ 
            [ 
                "@babel/preset-env", 
                { 
                    "loose": true, 
                    "modules": false 
                }
            ] 
        ] 
    }

  2. 预设的执行顺序

预设的执行顺序是逆序的，从后往前执行

plugins

  1. 插件的配置方式

    • 如果不使用任何参数，可以直接通过字符串的方式配置
        {
        "plugins": ["transform-decorators-legacy", "transform-class-properties"]
    }
    • 如果配置参数，需要使用数组的方式，第一个参数是插件名称，第二个参数是配置内容
        { 
        "plugins": [ 
            [ 
                "transform-async-to-module-method", 
                { 
                    "module": "bluebird", 
                    "method": "coroutine"
                } 
            ] 
        ] 
    }

  2. 插件的执行顺序

插件的执行顺序是正序的，从前往后执行

  1. 插件的执行时机

插件是在预设之前执行

Babel配置

@babel/preset-env

@babel/preset-env 是一个智能的预设，允许你使用最新的JavaScript，而不需要微管理你的目标环境需要哪些语法转换。

options

这里我们只提一下常用的配置项，如果想要了解全部的配置项，可以通过传送门前往查看。

  1. targets
  • 类型 string | Array | { [string]: string }
    // string
    "targets": "> 0.25%, not dead"
    
    // string[]
    "targets": [
        "> 1%",
        "not ie <= 8"
    ]
    
    // { [string]: string }
    { 
        "targets": { 
            "chrome": "58", 
            "ie": "11" 
        } 
    }

  • targets 支持的所有环境：chrome, opera, edge, firefox, safari, ie, ios, android, node, electron

  • 如果不配置，默认会转换所有ES2015-ES2020代码为ES5代码

  • 配置方式

    • 可以通过配置 package.json 中的 browserslist

    • 可以通过配置 .browserslist 文件

    • 可以通过配置 preset 的 targets

    • 权重排序 package.json < .browserslist < targets

  1. useBuiltIns

  • 枚举值："usage" | "entry" | false, 默认值为 false

    • false：不对polyfill做任何处理
    "use strict";

Promise.resolve('SUCCESS').then(function () {
  console.log('result');
});
    • usage：在当前文件中，根据配置的browserslist，自动引入浏览器不兼容的polyfill
        "use strict";
    
    require("core-js/modules/es.object.to-string.js");
    require("core-js/modules/es.promise.js");
    
    Promise.resolve('SUCCESS').then(function () {
      console.log('result');
    });
    • entry：根据配置的browserslist，引入浏览器不兼容的polyfill，需要在入口文件手动引入polyfill。
        "use strict";
    
    require("@babel/polyfill");
    
    Promise.resolve('SUCCESS').then(function () {
      console.log('result');
    });
  1. modules

  • 枚举值："amd" | "umd" | "systemjs" | "commonjs" | "cjs" | "auto" | false, 默认值为 "auto"

  • 将es6模块语法转换为其他的模块语法

avatar
文章
阅读
粉丝