babel-plugin-macros:babel的另一种配置方式

2020-01-22

翻译引用了文章 Babel macros

前言

对于现代的前端项目而言,webpack和babel是两个无法回避的工具。

相比于webpack的热度,以及webpack配置工程师等热门岗位,babel要默默无闻很多,但这并不是说它就不重要。

@babel/polyfill的核心依赖core.js的下载量,远超webpack、react等热门库。

babel配置

babel的作用可以看成是一个编译器,将一些浏览器不能支持的语法进行转换,使得这些语法能够在浏览器中正常的运行。

对于不同的语法,babel提供了对应的plugin来进行语法转换,还可以通过preset来把plugin进行统一处理,简化babel的配置。

babel的配置文件,就是由这些特定的plugin和preset组成的,一旦进行了配置,babel就会自动对语法进行转换。

存在的问题

使用这种方法进行配置和代码转化,所有的转化都是全局性的和隐式的,并且对于一些特定功能的自定义语法和函数无法支持。

举个栗子

optional-chaining提案被采纳之前,我们也会有很多方法来处理类似props?.user?.friends?.[0]?.friend的属性取值

最普通的写法,不易于阅读,但是最有效

const firstFriend =
  props.user && props.user.friends && props.user.friends[0]
    ? props.user.friends[0].friend
    : null;

// or 使用三元运算符
const firstFriend = props
  ? props.user
    ? props.user.friends
      ? props.user.friends
        ? props.user.friends[0]
          ? props.user.friends[0].friend
          : null
        : null
      : null
    : null
  : null;

易于书写,易于阅读,但是会增加运行时的开销

function idx(input, accessor) {
  try {
    return accessor(input);
  } catch (e) {
    return null;
  }
}

const firstFriend = idx(props, _ => _.user.friends[0].friend);

是否有一种方式,能够拥有上面两种方式的优势,既易于书写易于阅读,同时也不会因为try-catch增加运行时的开销。

facebookincubator/idx给出了一种思路,它使用babel plugin来分析哪些文件使用require或者import对idx进行了引用,然后对使用了idx的地方进行替换,下面是一个具体的例子

Install

npm install idx babel-plugin-idx

 or

 yarn add idx babel-plugin-idx

 // 修改babel配置文件
 {
  plugins: [
    ["babel-plugin-idx"]
  ]
}

Usage

import idx from 'idx';

function getFriends() {
  return idx(props, _ => _.user.friends[0].friends);
}

最终的代码会被转换为

function getFriends() {
  return props.user == null
    ? props.user
    : props.user.friends == null
    ? props.user.friends
    : props.user.friends[0] == null
    ? props.user.friends[0]
    : props.user.friends[0].friends;
}

上面的方案基本上达到了书写简单、阅读简单,同时没有增加运行时开销。但是存在一些问题:

  • 首先得写一个babel plugin
  • 需要一个特殊的标记符来定位需要进行转换的语法
  • 需要更新babel的配置文件
  • 如果idx函数存在问题,对于问题的定位会造成混乱。按照使用的语法,你会去找idx的定义文件,但是idx只是babel plugin的一个特殊标记,真正的代码在babel-plugin-idx中

Babel macros

什么是Babel macros

Babel macros 是babel-plugin-macros中出现的概念,可以理解为一种babel的宏。它是编译时代码转换成运行时代码的一个标准接口。

在babel进行编译的时候,babel-plugin-macros会对所有的模块进行遍历,查找以.macro结尾的引用,并将这些引用传递给.marco文件进行代码转换,用转换完的代码替换原来的引用。

如果宏是默认导出的,那么可以按照自己喜欢的方式对引用进行命名;如果是命名导出,也可以使用as语法重新命名。

使用Babel macros来处理idx

Install

npm install babel-plugin-macros --save-dev

// babel配置
{
  plugins: ['babel-plugin-macros'],
};

macro

// src/utils/idx.macro.js

const { createMacro } = require('babel-plugin-macros');
module.exports = createMacro(({ state, references }) => {
  references.default.forEach(referencePath => {
    idx_transform(referencePath.parentPath, state);
  });
});

use

// src/index.js

import idx from './utils/idx.macro';

function getFriends() {
  return idx(props, _ => _.user.friends[0].friends);
}

社区中已经有idx对应的marco,idx.macro

如何编写一个marco

babel-plugin-marcos提供了一个实现宏的规范,但它还是基于babel来实现的。所以要开发一个marco,要对babel有一定的了解。

首先要熟悉babel,了解如何编写一个babel插件 babel插件手册

babel-plugin-marcos提供了官方的marco开发手册,hand book for macros authors

这里实现一个try-catch的marco

try-catch.macro

在项目开发中经常会遇到一些错误没有抛出,导致无法定位问题。希望通过一种简单的方法来对函数进行try catch包装。

通过babel-plugin-marcos来进行按需的转换,而不是通过babel的插件进行全局的替换。

装饰器语法对于单纯的函数没法处理,所以这里就选用了flow的语法。使用flow的语法来对需要转换的方法进行标记,在语法方法可能不太符合flow的标准。

因为使用了flow的语法,所以要安装对应的preset,npm install --save-dev @babel/preset-flow。这里对于flow的使用可能不符合规范,只是为了简化操作。

// marco.js
const { createMacro } = require('babel-plugin-macros');

function macro({ babel, references, state }) {
  const { types, template } = babel;

  // babel的模板函数,生成最终的被try catch包裹的函数体
  const wrapFunctionWithTryCatch = template(`{
    try {
      BODY
    } catch(e) {
      console.error(e);
    }
  }`);

  references.TryCatch.forEach(reference => {
    const parentFunction = reference.getFunctionParent();

    if (!parentFunction) {
      return;
    }

    const body = parentFunction.node.body.body;

    if (!body || !body.length) {
      return;
    }

    // 对于已经被try catch包裹的函数不做处理
    if (body.length === 1 && types.isTryStatement(body[0])) {
      return;
    }

    // 使用模板函数替换老的函数体
    parentFunction.get('body').replaceWith(wrapFunctionWithTryCatch({
      BODY: body,
    }));

  });
}

module.exports = createMacro(macro)

marco需要是一个js的模块,通过babel-plugin-macros导出的createMacro方法对转换函数进行包裹并导出。

macro函数接受一个对象,其中三个常用的属性是babel、state和references。

  • babel就是babel-plugin-macros模块,包含了babel的所有功能
  • state是常规的babel插件中visitor的第二个参数
  • references是模块中对marco的所有引用

最终效果

import { TryCatch } from 'try-catch.macro';

var a = (b): TryCatch => {
  return b;
}

class Test {

  print = (): TryCatch => {
    const data = this.getData();

    return data;
  }
}

    ↓ ↓ ↓ ↓ ↓ ↓

var a = (b) => {
  try {
    return b;
  } catch(e) {
    console.error(e);
  }
}

class Test {

  print = () => {
    try {
      const data = this.getData();

      return data;
    } catch(e) {
      console.log(e);
    }
  }
}

github仓库是 try-catch.macro

总结

babel-plugin-marcos给我们提供了另一种代码转换的思路,通过显式的引用实现代码的按需转换。

通过规范化的接口定义,保证了marco的开发规范。

通过编译时的代码转换,在某些场景下能够减少代码运行时的开销。

社区也有很多高质量的宏开源出来,基本上所有的css in js的方案都提供了对应的marco,减少了依赖的安装,代码更加直观。

链接

Babel macros

babel插件手册

hand book for macros authors

awesome-babel-macros


原文链接:juejin.im

上一篇:一个仅需原生api的canvas互动库⭐️
下一篇:把会话放在Node层 我们这样做的很开心😋
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部