Exportieren einer Klasse mit Webpack und Babel nicht funktioniert
Ich habe ein sehr einfaches setup mit Webpack und Babel für eine kleine Bibliothek.
Zuvor hatte ich die folgende Architektur zu generieren ES5-version der Bibliothek:
module.exports.lib = (function () {
/* private part of library here */
return {
... /* public part of library here */
}
})();
Alles ist in Ordnung, auf diese Weise, und ich hatte sogar einige ES6-features wie Pfeil-Funktionen " meine Bibliothek und alles funktionierte. Jedoch, ich beschloss, mich zu ändern meine Herangehensweise an ein ES6-Klasse, auf diese Weise:
export default class Library {
}
Und wenn ich jetzt versuche, das zu tun:
var library = new Library();
Bekomme ich diese Bibliothek war nicht definiert. Auch nur die Bewertung Library
gibt Sie undefined zurück.
Also, was ich Tat, war wiederum die Datei, die die Bibliothek nutzt, in ein ES6-Datei, die nicht import Library from 'libraryfile.js'
und es funktionierte wieder.
Aber ich würde wirklich gerne meine output-Bibliothek, um noch verwendbar, von den regelmäßigen ES5 mit einem <script>
tag genau so wie vorher. Ist das möglich?
Hier mein webpack config-Datei:
module.exports = {
entry: {
pentagine: "./lib/pentagine.js",
demos: ["./demos/helicopter_game/PlayState.js"]
},
output: {
path: __dirname,
filename: "./build/[name].js",
libraryTarget: 'umd'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015']
}
}
]
}
};
- "Aber ich würde wirklich gerne meine output-Bibliothek noch gültig sein ES5. Ist das möglich?" Babel schon tut...
- Ja, es ist gültig, ES5, aber ich will ich meinte ist, dass ich es will verwendbar sein, die durch regelmäßige ES5-code mit einem normalen script-tag. Ich werde Bearbeiten Sie die Frage.
- Dies könnte helfen: stackoverflow.com/q/33678869/218196
- Es half, als ich lernte ziemlich viel, aber es scheint nicht das gleiche Problem wie mit der
add-module-exports
plugin hat das problem nicht behoben.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Standard-Exporte gespeichert werden, in der
default
Eigenschaft des Moduls. Wenn Sie möchten, um Ihre Bibliothek zugänglich, ohne dass Benutzer wissen, dass Sie können ändern Sie Ihr webpack-Eintrag Datei, umStellen Sie außerdem sicher, dass Sie
library: 'YourLibraryName'
in Ihrem webpack config als webpack pro.github.io/docs/Konfiguration.html - #Ausgabe-Bibliothek.entry.js
denen nur der code istmodule.exports = require('./pentagine.js').default;
. Ich änderte den Eintrag Datei im webpack zuentry.js
aber ich bekomme immer noch nicht definiert.pentagine.js
haben eine Standard-export?export default class Pentagine
ist, was es ist. (Sie können es hier zu sehen github.com/davidgomes/pentagine.js/tree/es6-version)library: 'YourLibraryName'
in Ihrem webpack config. webpack.github.io/docs/Konfiguration.html - #Ausgabe-Bibliotheklibrary: 'YourLibraryName'
entfernt webpack 4