babel —— 基础概念

·  阅读 102

这是我参与2022首次更文挑战的第4天,活动详情查看:2022首次更文挑战

前言

在如今的前端开发中,babel已经是不可或缺的一部分。但是由于很多脚手架都是开箱即用式,开发者无需关心里边的具体配置,这也导致配置这部分成为一个盲盒。

最近在写一个比较简单的需求,不需要用Vue等大型框架,只需要将一些简单的ES6代码编译成ES5就好了,但是代码写完,用哪个babel插件来转,用babel-polyfill??babel-transform??babel-runtime??它们有啥区别??我完全是懵逼的。这篇文章就来简单记录下babel的一些基础知识。

babel到底用来做什么

网上有一段比较官方的解释:

Babel是一个JavaScript编译器,它主要用来将高版本的JS代码转化为向后兼容的JS代码,从而能让我明年的代码运行在低版本的浏览器或者其他环境中。

看起来babel的作用就是将代码转化为向后兼容的JS语法,让我们开发者无需关注低版本浏览器的兼容问题,不用写一大堆兼容代码。

babel版本变更

  • babel5及其以前的版本是一个集合工具包,包含cli工具+编译器+转化器。

  • babel6将babel进行了拆分,babel不再携带任何转化器,而是将所有的转化功能分解到各个plugin里。

  • babel7则将所有的包都挂载到了@babel下,不再支持低版本的node,要求node版本>=6。

babel与@babel区别

babel6的babel-xxx与babel7的@babel/xxx包,有什么区别呢??

npm的包管理系统中有一种scoped package机制,用于私有模块包的管理。如果一个模块以@开始(@scope/package),那么它就是一个scoped package。

babel7利用了npm的scoped package机制,将所有的包都挂载到了@babel下。这样在node_modules中,可以看到所有的babel模块都在@babel文件夹下,而不像以前所有的babel-xxx都在node_modules下。

image.png

babel配置

常见的babel配置文件:

  • .babelrc(也可以直接将配置写在package.json文件)
  • .babelrc.js
  • babel.config.js

.babelrc与.babelrc.js是类似的,不同点在于一个是json文件,一个是js文件。

那它们与babel.config.js有什么区别呢??

babel.config.js与.babelrc区别

  • babel.config.js是当前项目维度的配置,相当于一份全局配置。如果babel使用这个配置文件,则会应用到所有的文件。

  • .babelrc,.babelrc.js以及package.json中的babel配置都是相对文件维度的配置文件,babel决定一个js文件应用哪些配置时,会执行如下策略:如果要转化的js在当前项目内,则会递归向上搜索最近的一个.babelrc文件(.babelrc.js/package.json中babel配置),将其余全局配置合并。

配置项

  1. js文件配置(babel.config.js或.babelrc.js)
module.exports = function (api) { 
    api.cache(true); 
    const presets = [ ... ]; 
    const plugins = [ ... ]; 
    return { presets, plugins }; 
}
复制代码
  1. .babelrc文件配置
{
  "plugins": [],
  "presets": []
}
复制代码
  1. package.json文件配置 增加babel属性:
{
  "name": "babel_test",
  "version" : "0.1.0",
  "babel": {
    "plugins": [],
    "presets": []
  }
}
复制代码

无论那种配置方式,主要配置两个部分:插件列表和预设列表。

插件列表很好理解,预设列表是用来干什么的呢??

官方文档中说preset可以被当做Babel插件或者配置项的共享Set。不太懂是吧,哈哈哈。

我们在做ES6语法转化时,可能要添加好多个babel插件,一个个去添加是非常麻烦的,这时候preset的作用就出来了。可以理解为presets就是一堆babel插件的集合,避免了让开发者一个个去引用。

下边是一个'@vue/babel-preset-app'的presets,可以看到里边包含了很多babel插件:

image.png

plugins与presets的执行顺序:

  • plugins在presets之前运行
  • plugins运行从前往后
  • presets运行从后往前

运行babel

  1. 命令行直接执行命令来编译文件(需要安装@babel/cli)
  2. 构建工具的插件(webpack的babel-loader;rollup的rollup-plugin-babel)

后记

这篇主要记录了一些babel的理论基础,下篇整理下常用的babel插件。

参考

一文彻底读懂Babel

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改