Hallo da ich gezwungen bin hier her zu kommen wegen jeder Ressource da draußen zu dem Thema ist sehr schlecht und unvollständig.Grunt, Babel Setup für Es6 mit externem Helfer
Nicht nur auf der Babel-Seite, sondern jeder einzelne Post da draußen ist nicht vollständig und informativ genug.
Ich versuchte auf das Babel-Forum zu erreichen und keine Antworten.
Ich versuche, meine Prototyp-Bibliotheken zu Es6 zu konvertieren und zu dem magersten möglichen Code zu konvertieren. Also kein bloaty dupliziert generierten Code und wenn möglich keine bloaty requirejs und was auch immer browserify generiert.
Ich habe versucht, ein Projekt mit grunt und babel direkt zu erstellen, konfiguriere das extern-helper-Plugin entsprechend der babel-Dokumentation.
Es enthält nicht den entsprechenden Hilfscode und enthält den Importmodulcode nicht vollständig.
dh ein babel Config wie
{
options: {
sourceMap: false,
presets: ['es2015'],
"plugins": ["external-helpers"]
},
dist: {
files: {
'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
}
}
}
Das Hauptprojektdatei hat einen Import wie
import Button from './ui/buttons/Button';
Das Code-Modul wie folgt aussieht, als ob der Export unter zusätzlichem Code platziert wird, wird für das erzeugt .
export default class ShareButton {}
erzeugt eine Ausgabe wie folgt
Object.defineProperty(exports, "__esModule", {
value: true
});
require('babel-core/external-helpers');
var _Button = require('./ui/buttons/Button');
var _Button2 = babelHelpers.interopRequireDefault(_Button);
keine Quelle des Moduls oder der Helfer-Objekt enthalten ist.
Ich suchte schwer wie mit externen Helfern beschäftigen und es legt nahe, es in eine separate Datei also so etwas wie dies nur die Helferfunktionen benötigt zur Erzeugung importiert werden muss
babel-external-helpers -l createClass > src/helpers.js
aber jede Ressource Bezug auf Das geht nicht so weit, wie man das in das Projekt importiert.
Wenn ich das Transform-Laufzeit-Plugin verwende, produziert es eine massive Polyfill, die nicht deaktiviert werden kann, so ein Bug und nicht so nützlich für das, was ich brauche.
Wenn ich browserify/babelify verwende, macht es eine rohe Verwirrung und dupliziert den Code noch.
Eine Konfiguration wie
{
options: {
"transform": [["babelify", {
"presets": ["es2015"],
"plugins": ["external-helpers"],
sourceMap: false
}]]
},
dist: {
files: {
'build/<%= package.name %>.js': ['src/<%= package.name %>.js']
}
}
}
Erzeugt Code wie dies immer noch mit dem externen Helfer fehlen und dupliziert Code nicht relevant für die Helfer. dh
Object.defineProperty(exports, "__esModule", {
value: true
});
Ist innerhalb jedes Moduls in der generierten Datei.
Wenn ich die Klassen wie diese am unteren Rand jeder
export default class {}
duplizierten Code wird wie
erzeugtvar _class = function _class() {
babelHelpers.classCallCheck(this, _class);
};
exports.default = _class;
In Bezug auf die Dateigröße, die nicht bloaty Verpackung Code wie
enthält},{}],2:[function(require,module,exports){
Es scheint alle Prototyp-Klassen-Dateien zusammen zu bündeln le in einer Datei ist der Gewinner immer noch.
Versuchen Sie also, die Bibliothek zu portieren, aber behalten Sie sie ähnlich und bündeln Sie sie in einer Datei.
Hoffentlich ist dies kurz genug und es gibt eine einfache Lösung.
FYI-Browser verstehen Tabs und 4 Leerzeichen nicht. Ich musste diesen Beitrag in meinem Editor bearbeiten, damit die Code-Blöcke funktionieren! Es wäre schön, ein Markup wie andere Orte wie "` `` "zu haben?
Lassen Sie mich wissen, danke.
Wie jetzt gerade dachte ich, ich muss den Helfer manuell generieren, es minimieren und dann concat das zum generierten Babel-Build. dh babel-external-Helfer -l createClass, classCallCheck erbt, interopRequireDefault, possibleConstructorReturn> ../../lib/babel/helpers.js Der Versuch, herauszufinden, wie man diese speziell importieren und automatisch gebaut werden. Es scheint einen Fehler mit dem Transform-Runtime-Plugin, wo es erzeugt die gesamte Polyfill unabhängig, was die Datei unnötig groß macht, so nicht so nützlich. –