Reduzieren Sie transpilierte Code-Helfer mit babel und webpack

Question

In meinem Projekt verwende ich babel, um auf ES5 zu übertragen. Ich verwende webpack, um alles zusammen zu bündeln. Es gibt mehrere Stellen, an denen babel eine Funktion am Anfang jeder Datei hinzufügt, um eine Funktion zu unterstützen (wie Restparameter here oder import Anweisungen here).

Zum Beispiel ziemlich jede Datei hat das an der Spitze:

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

Und mehrere Dateien haben dies:

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); } }; 

In meinem smaller project das ist keine große Sache, aber in Mein Projekt bei der Arbeit, ich mache das gleiche und ich bin mir sicher, dass ich mehr als ein paar Bytes rasieren konnte, indem ich einen Weg fand, all diese Polyfills an einem Ort zu haben und auf diese zu verweisen. Anstatt _interopRequire in jeder Datei zu haben, die import verwendet (was fast jede Datei ist), haben Sie sie an einem Ort und werden referenziert.

Gibt es eine Möglichkeit, dies zu tun?

Answer 1

'babel optional = Laufzeit?' Ich bin mir nicht sicher, was ich mit einer Bibliothek oder einem kleinen Projekt tun soll. Ich denke, Sie würden von den externen Helfern nicht wirklich profitieren. Für meine Anwendung habe ich jedoch festgestellt, dass es nach dem Gippen tatsächlich kleiner ist, als wenn ich die Helfer mit einschließe.

Babel hat ein paar Hilfsfunktionen, die bei Bedarf an der Spitze des generierten Codes platziert werden, so dass es nicht mehrfach in dieser Datei inline ist. Dies kann zu einem Problem werden, wenn Sie mehrere Dateien haben, insbesondere wenn Sie sie an den Browser senden. Gzip erleichtert die meisten dieser Bedenken, aber es ist immer noch nicht ideal.

(Hervorhebung hinzugefügt)

Damit meine Lösung ist, und ich bin damit zufrieden. (Mach dir im Grunde keine Sorgen).

Answer 2

hatte ich die gleiche Frage vor einiger Zeit, und es gibt klare Antwort in der Dokumentation:

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

In webpack Config Sie es genauso tun können

Answer 3

Verwenden Babel Runtime,

Da diese Helfer ziemlich lang werden, und sie an die Spitze von jeder Datei hinzugefügt Sie können sie in eine einzige „Laufzeit“ bewegen, die benötigt werden.

Beginnen Sie mit der Installation von babel-Plugin-Transformations-Runtime und babel-Laufzeit:

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