Ridurre gli helper del codice transpiled con babel e webpack

Question

Nel mio progetto, sto usando babel per traspondere fino a ES5. Sto usando webpack per raggruppare tutto insieme. Ci sono molti posti in cui Babel aggiunge una funzione nella parte superiore di un dato file per supportare alcune funzionalità (come i parametri di riposo here o import dichiarazioni here).

Ad esempio, praticamente ogni file ha questo in cima:

var _interopRequire = function (obj) { return obj && obj.__esModule ? obj["default"] : obj; }; 

E diversi file avere questo:

var _toConsumableArray = function (arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) arr2[i] = arr[i]; return arr2; } else { return Array.from(arr); } }; 

Nel mio smaller project questo non è un affare enorme, ma in il mio progetto al lavoro, sto facendo la stessa cosa e sono sicuro di riuscire a radere più di pochi byte cercando di avere tutti questi polyfill in un unico posto e fare riferimento a babel/webpack. Quindi, piuttosto che avere _interopRequire in ogni file che utilizza import (che è quasi ogni file), averlo in un posto e fare riferimento.

C'è un modo per farlo?

Answer 1

'babele opzionale = runtime?' Non sono sicuro di cosa fare su una biblioteca o un piccolo progetto. Sto pensando che non potresti trarre alcun beneficio dall'uso degli helper esterni. Tuttavia, per la mia applicazione, ho scoperto che dopo il gzipping, in realtà è più piccolo di se includessi gli helper.

Babel dispone di alcune funzioni di supporto che verranno posizionate nella parte superiore del codice generato, se necessario, in modo che non sia più in linea più volte in tutto il file. Questo può diventare un problema se si hanno più file, specialmente quando li si invia al browser. gzip allevia la maggior parte di questa preoccupazione, ma non è ancora l'ideale.

(enfasi aggiunta)

Ecco, questo è la mia soluzione e sono felice con quello. (Fondamentalmente, non preoccuparti).

Answer 2

ho avuto la stessa domanda un po 'di tempo fa, e non c'è risposta chiara nella documentazione:

https://babeljs.io/docs/usage/runtime/

In webpack config lo si può fare altrettanto

Answer 3

Usa Babel Runtime,

Dal momento che questi aiutanti possono ottenere abbastanza a lungo, e ottengono aggiunto nella parte superiore di ogni file è possibile spostarli in un unico "runtime" che viene richiesto.

Inizia con l'installazione di babel-plugin-transform-runtime e babel-runtime:

$ npm install --save-dev babel-plugin-transform-runtime 
$ npm install --save babel-runtime