Perché babel riscrive la chiamata di funzione importata in (0, fn) (…)?

Dato un file di input come

import { a } from 'b';

function x () {
  a()
}

babel lo compilerà in

'use strict';

var _b = require('b');

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

ma quando viene compilato in modalità libera, la chiamata alla funzione viene emessa come _b.a();

Ho fatto alcune ricerche su dove viene aggiunto l'operatore virgola nella speranza che ci fosse un commento che lo spiegasse. Il codice responsabile dell'aggiunta è qui .

(0, _b.a)()assicura che la funzione _b.asia chiamata con thisimpostato sull'oggetto globale (o se la modalità rigorosa è abilitata, su undefined). Se si dovesse chiamare _b.a()direttamente, _b.aviene chiamato con thisimpostato su _b.

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

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

( ,è l'operatore virgola, vedere https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator ).

L'operatore virgola valuta ciascuno dei suoi operandi (da sinistra a destra) e restituisce il valore dell'ultimo operando.

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

Quindi, vediamo un esempio:

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

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

Ora, nel foometodo, thisè uguale a a(perché fooè attaccato a a). Quindi, se chiami a.foo() direttamente, accederà falsealla console.

Ma, se fossi chiamata (0, a.foo)(). L'espressione (0, a.foo)valuterà ciascuno dei suoi operandi (da sinistra a destra) e restituirà il valore dell'ultimo operando. In altre parole, (0, a.foo)è equivalente a

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

Poiché questa funzione non è più collegata a nulla, thisè l'oggetto globale window. Ecco perché accede truealla console durante la chiamata (0, a.foo)().