babel7.8版本配置 一看就会 一写不废!!

1,012 阅读4分钟

各位看官git上求个星星! 我有趣的前端笔记!!(webpack,babel,typescript,手撕排序算法等持续更新中!!)

0、基础

我们先看看 Babel 能够做什么:

  • 语法转换
  • 通过 Polyfill 方式在目标环境中添加缺失的特性(@babel/polyfill模块)
  • 源码转换(codemods)

1、起步

npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill

2、配置文件

创建 babel.config.json 配置文件

//样例
{
  "presets": [
    [
      //预设
      "@babel/env",
      {
        //目标浏览器版本
        //也可设置browserslist 将使用默认配置> 0.5%, last 2 versions, Firefox ESR, not dead。
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        //
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ],
  //下载需要的插件 并将其对应的放入即可
  "plugins": []
}

参数分析

  • preset-预设

    • 官方推荐 env 会根据你配置的目标环境,生成插件列表来编译。

    因为语法转换只是将高版本的语法转换成低版本的,但是新的内置函数、实例方法无法转换。

    例如 箭头函数 reduce函数 会被转换成低版本, 但 promise /async/await 还有 class等 这种内置方法并不可以,因此就需要polyfill

  • polyfill-垫片(转换内置函数/方法)被废弃!!

    • 由于已被废弃 不再展示 但有引导作用

    原因是太大了!虽然能帮助转换 但每次需要转换时,就必须要将其全部引入(多达89K!)会将不必要的在引入至全局。憨不憨?但如何解决嫩? babel官方已经给出方法了 接着看!

  • useBuiltIns-位于预设中的参数 上方演示代码有

    • 官方推荐 usage

    顾名思义 当我需要垫片polyfill去转换内置方法时 会自动加载所需要的 即按需加载!

    在文件需要的位置单独按需引入,可以保证在每个bundler中只引入一份。当前模式类似于@babel/plugin-transform-runtime,polyfill局部使用,制造一个沙盒环境,不造成全局污染。但是当你组件过多时呢?会重复打包相同的代码,因此我们可以看下方的entry

    但要注意corejs参数问题 下面有解析

    • entry

    需要在项目入口处引入import "@babel/polyfill”;

    看起来是全局导入,但不同的是 插件@babel/preset-env会将把@babel/polyfill根据实际需求打散,只留下必须的。实际上编译时会只import需要的core-js/xxx

    • false 此为默认参数

    啥都别搞 我自己plugins

  • core-js - 核心块

    • 不晓得这是干什么的? 看看上面示例代码 他是跟着useBuiltIns一起的!

    当用useBuiltIns:usage 必须要同时设置 corejs (如果不设置,会给出警告,默认使用的是"corejs": 2) ,注意: 这里仍然需要安装 @babel/polyfill(当前 @babel/polyfill 版本默认会安装 "corejs": 2):

    首先说一下使用 core-js@3 的原因,core-js@2 分支中已经不会再添加新特性,新特性都会添加到 core-js@3。例如你使用了 Array.prototype.flat(),如果你使用的是 core-js@2,那么其不包含此新特性。为了可以使用更多的新特性,建议大家使用 core-js@3

  • plugins 关注@babel/plugin-transform-runtime 插件!!

    • 当你有一些和浏览器没关系的转换要求?

    不怕 plugins满足你 看官网找到对应的plugin ,

    1、安装

    2、写在 babel.config.json的plugins数组中即可! easy

    • 此时不得不提刚刚说到的*@babel/plugin-transform-runtime 插件*

    即使我们有了神器按需加载,但当我们用到同一个转换方法或class转换低版本时也会被重复 import 这反而会使代码增大!!

    这个时候,就是 @babel/plugin-transform-runtime 插件大显身手的时候了,使用 @babel/plugin-transform-runtime 插件,所有帮助程序都将引用模块 @babel/runtime,这样就可以避免编译后的代码中出现重复的帮助程序,有效减少包体积。

    • 如何使用呢?

    npm install --save-dev @babel/plugin-transform-runtime
    npm install --save @babel/runtime
    

    plugins中引入即可!

    ##最终版##

    {
      "presets": [
        [
          "@babel/preset-env"
        ]
      ],
      "plugins": [
        [
          "@babel/plugin-transform-runtime",
          {
            "corejs": 3
          }
        ]
      ]
    }
    

3、调用编译(命令方式)

调用babel命令 将src中的文件 编译后放到lib中

./node_modules/.bin/babel src --out-dir lib
   或
npx babel src --out-dir lib

npx 与 npm区别

npx是一个工具,就像npm极大地提升了我们安装和管理包依赖的体验,在npm的基础之上,npx让npm包中的命令行工具和其他可执行文件在使用上变得更加简单。它极大地简化了我们之前使用纯粹的npm时所需要的大量步骤。

主要特点:

1、临时安装可执行依赖包,不用全局安装,不用担心长期的污染。

2、可以执行依赖包中的命令,安装完成自动运行。

3、自动加载node_modules中依赖包,不用指定$PATH。此处的编译命令即用到了这个特点

4、可以指定node版本、命令的版本,解决了不同项目使用不同版本的命令的问题。