Por que o babel reescreve a chamada de função importada para (0, fn) (…)?

Dado um arquivo de entrada como

import { a } from 'b';

function x () {
  a()
}

babel irá compilá-lo para

'use strict';

var _b = require('b');

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

mas quando compilado em modo flexível, a chamada de função é produzida como _b.a();

Eu fiz algumas pesquisas sobre onde o operador vírgula é adicionado na esperança de que houvesse um comentário explicando isso. O código responsável por adicioná-lo está aqui .

(0, _b.a)()garante que a função _b.aseja chamada com thisdefinido para o objeto global (ou se o modo estrito estiver ativado, para undefined). Se você chamasse _b.a()diretamente, _b.aé chamado com thisdefinido como _b.

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

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

( ,é o operador vírgula, consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator ).

O operador vírgula avalia cada um de seus operandos (da esquerda para a direita) e retorna o valor do último operando.

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

Então, vamos ver um exemplo:

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

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

Agora, no foométodo, thisé igual a a(porque fooestá anexado aa ). Portanto, se você ligar a.foo() diretamente, ele registraráfalse no console.

Mas, se você fosse chamado (0, a.foo)(). A expressão (0, a.foo)avaliará cada um de seus operandos (da esquerda para a direita) e retornará o valor do último operando. Em outras palavras, (0, a.foo)é equivalente a

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

Uma vez que esta função não está mais ligada a nada, é this é o objeto global window. É por isso que ele faz logon trueno console quando liga (0, a.foo)().