¿Por qué babel reescribe la llamada de función importada en (0, fn) (…)?

Dado un archivo de entrada como

import { a } from 'b';

function x () {
  a()
}

babel lo compilará para

'use strict';

var _b = require('b');

function x() {
  (0, _b.a)();
}

pero cuando se compila en modo suelto, la llamada a la función se emite como _b.a();

He investigado un poco dónde se agrega el operador de coma con la esperanza de que haya un comentario que lo explique. El código responsable de agregarlo está aquí .

(0, _b.a)()asegura que la función _b.ase llame con thisel objeto global establecido (o si el modo estricto está habilitado, en undefined). Si tuviera que llamar _b.a()directamente, entonces _b.ase llama con thisconfigurado en _b.

(0, _b.a)(); es equivalente a

0; // Ignore result
var tmp = _b.a;
tmp();

( ,es el operador de coma, consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator ).

El operador de coma evalúa cada uno de sus operandos (de izquierda a derecha) y devuelve el valor del último operando.

console.log((1, 2)); // Returns 2 in console
console.log((a = b = 3, c = 4)); // Returns 4 in console

Entonces, veamos un ejemplo:

var a = {
  foo: function() {
    console.log(this === window);
  }
};

a.foo(); // Returns 'false' in console
(0, a.foo)(); // Returns 'true' in console

Ahora, en foométodo, thises igual a a(porque foose adjunta a a). Entonces, si llama a.foo() directamente, iniciará sesión falseen la consola.

Pero, si te llamaras (0, a.foo)(). La expresión (0, a.foo)evaluará cada uno de sus operandos (de izquierda a derecha) y devolverá el valor del último operando. En otras palabras, (0, a.foo)es equivalente a

function() {
  console.log(this === window);
}

Dado que esta función ya no está asociada a nada, thises el objeto global window. Es por eso que inicia sesión trueen la consola cuando llama (0, a.foo)().