Babel：plugin、preset的区别与使用 - HelloWorld开发者社区

关注“重度前端”

助力前端深度学习

━━━━━

前言

在现代大前端的生态环境下，相信大部分前端同行都用过babel，也知道babel的作用以及相关的配置和使用，本文不说如何配置和使用，老张想从一个宏观的角度去理解babel，理解它的机制，希望可以在后续的使用中不至于存在那么多的迷惑。

本文概览

简单介绍babel处理代码的过程、什么是Babel Plugin、Babel Preset，两者的区别与联系、如何使用plugin/preset、如何创建自定义preset以及使用注意事项等。

Babel 代码处理过程

Babel 是一个编译器。从宏观角度看，它将运行代码分为3个阶段: 解析，转换，及生成（与其他编译器相同）。

初始阶段，Babel 并没有做任何事情。它基本上就相当于 const babel = code => code;，先解析代码，然后再次生成相同的代码。

你可以为 Babel 添加一些插件让其去做任何事情(插件会影响 Babel 的第 2 阶段，转换)。

具体的代码转换原理后面会有单独的文章介绍，这里只做一个抽象的理解

Babel Plugin简介

Babel是代码转换器，比如将ES6转成ES5，或者将JSX转成JS等。借助Babel，开发者可以提前用上新的JS特性，这对生产力的提升大有帮助。

实现Babel代码转换功能的核心，就是Babel插件（plugin）。

原始代码 --> [Babel Plugin] --> 转换后的代码

Babel Plugin例子

源代码如下，这里用到了两个只有ES6才支持的新特性：箭头函数、字符串模板。在只支持ES5的浏览器里，这两段代码会报错。

因此，可以借助插件将代码转成ES5。

// index.js// 箭头函数[1,2,3].map(n => n + 1);// 模板字面量let nick = '程序员小卡';let desc = `hello ${nick}`;

安装依赖：

npm install --save-dev babel-cli 
npm install --save-dev babel-plugin-transform-es2015-arrow-functions
npm install --save-dev babel-plugin-babel-plugin-transform-es2015-template-literals

执行转换，通过--plugins声明依赖的插件，多个插件之间采用,进行分隔。

npx babel

转换结果如下：

[1, 2, 3].map(function (n) {
  return n + 1;});let nick = '程序员小卡';let desc = 'hello ' + nick;

转换命令中，插件名称可以省去babel-plugin前缀：

npx  babel

也可以改成配置文件 .babelrc，plugins字段中声明的插件会按照顺序执行。

{
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-es2015-template-literals"
  ]}

再次执行转换命令：

npx babel

Babel Preset简介

Babel插件一般尽可能拆成小的力度，开发者可以按需引进。比如对ES6转ES5的功能，Babel官方拆成了20+个插件。

这样的好处显而易见，既提高了性能，也提高了扩展性。比如开发者想要体验ES6的箭头函数特性，那他只需要引入transform-es2015-arrow-functions插件就可以，而不是加载ES6全家桶。

但很多时候，逐个插件引入的效率比较低下。比如在项目开发中，开发者想要将所有ES6的代码转成ES5，插件逐个引入的方式令人抓狂，不单费力，而且容易出错。

这个时候，可以采用Babel Preset。

可以简单的把Babel Preset视为Babel Plugin的集合。比如babel-preset-es2015就包含了所有跟ES6转换有关的插件。

下面通过例子说明。

Babel Preset例子

还是原来的代码，这次采用babel-preset-es2015进行转换。

首先，安装依赖：

npm install --save-dev babel-cli 
npm install --save-dev babel-preset-es2015

执行转换，通过--presets声明依赖的preset，多个preset之间用,做分隔。

npx babel  

同样可以采用配置文件 .babelrc。

{
  "presets": [ "es2015" ]}

转换命令：

npx babel

Plugin与Preset执行顺序

可以同时使用多个Plugin和Preset，此时，它们的执行顺序非常重要。

1.先执行完所有Plugin，再执行Preset。

2.多个Plugin，按照声明次序顺序执行。

3.多个Preset，按照声明次序逆序执行。

比如.babelrc配置如下，那么执行的顺序为：

Plugin：transform-react-jsx、transform-async-to-generator
Preset：es2016、es2015

{ "plugins": [ "transform-react-jsx", "transform-async-to-generator" ], "presets": [ "es2015", "es2016" ]}

下面通过简单例子进行说明。

Plugin、Preset混用例子

例子：将 index.jsx 编译成 index.js，并且采用 ES5规范。这里包含两个步骤：

将 jsx 语法转成 js 语法。
将 ES6规范转成 ES5规范。

源代码如下：

// index.jsxvar profile = <div>
  <img src="avatar.png" className="profile" />
  <h3>{[user.firstName, user.lastName].join(' ')}</h3></div>;var foo = () => "foo";

安装依赖：

npm install --save-dev babel-cli 
npm install --save-dev babel-plugin-transform-react-jsx 
npm install --save-dev babel-preset-es2015

配置文件 .babelrc：

{
  "plugins": [ "transform-react-jsx" ],
  "presets": [ "es2015" ]}

执行转换：

npx babel index.jsx

转换结果如下：

"use strict";var profile = React.createElement(
  "div",
  null,
  React.createElement("img", { src: "avatar.png", className: "profile" }),
  React.createElement(
    "h3",
    null,
    [user.firstName, user.lastName].join(' ')
  ));var foo = function foo() {
  return "foo";};

读者可以试下下面命令，单独采用bebel-preset-es2015进行代码转换，结果会报语法错误。这从侧面可以印证Plugin的执行顺序在Preset之前。

npx babel index.jsx

自定义Babel Preset

前面提到，Preset是Plugin的集合。借助强大的社区，常见的转换功能都已经有人实现的，很多时候，开发者只需要按需引用即可。

在实际开发中，我们需要用到的Plugin/Preset相对比较固定，如果每次都要重复编写，或者拷贝babel配置文件，既繁琐，又容易出错。这个时候，可以考虑自定义Babel Preset。

以前面的 index.jsjsx 编译为例，我们用到了 babel-preset-es2015、babel-plugin-transform-react-jsx，可以创建自定义的 preset，把它们包含进去：()

// mypreset.jsmodule.exports = {
  presets: [
    require("babel-preset-es2015"),
  ],
  plugins: [    
    require("babel-plugin-transform-react-jsx"),
  ]};

然后，修改.babelrc。这里因为是本地文件，所有用到了相对路径，如果发布到了npm上，就可以直接用包名。

{
  "presets": [
    "./mypreset.js"
  ]}

转码过程略，读者自行尝试。

Plugin/Preset配置项

Babel Plugin、Babel Preset都支持配置项，配置项语法都是相同的，如下所示（插件类似）。

{
    "presets": [ 
        presetName01, // 没有配置
        [ presetName02, presetOptions02 ] // 有配置
    ]}

具体例子如下：

{
  "presets": [
    ["es2015", {
      "loose": true,
      "modules": false
    }]
  ]}

不同Plugin/Preset的配置项作用可能不同，具体请查阅它们的官方文档。

----End

关于本文

原文地址：https://www.chyingp.com/posts/understanding-babel-plugin-and-preset/

参考：https://www.babeljs.cn/docs/plugins/#pluginpreset-%E9%80%89%E9%A1%B9

老张根据自己的理解并且在不影响文章原意的基础上对文章做了轻微的修改，如果有错误欢迎斧正

重度前端****--助力深度学习

为web前端同行提供有价值、有深度的技术文章

官网：http://bigerfe.com【建设中】

Babel：plugin、preset的区别与使用

长按二维码关注我

本文分享自微信公众号 - 前端技术江湖（bigerfe）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

前言