Wie kann ich mit dem Webpack Reactjs-Komponenten bündeln, die ES6 verwenden? Das resultierende Bündel sollte in ES6 sein, es sollte nicht nach ES5 übertragen werden.Wie man ES6-basierte React-Komponenten bündelt und das Bundle mit Webpack in ES6 hält?
Es gibt viele gute Reactjs/webpack Beispiele zur Verfügung, aber alles, was ich gefunden habe, transpilieren zu ES5.
Führen Sie einfach babel-loader ohne ES2015 Preset und fügen Sie das transform-react-jsx Plugin:
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
plugins: ['transform-react-jsx']
}
}
]
}
Ich fand das sehr schönes Beispiel, wie Webpack konfigurieren mit Reagieren und mehr: https://github.com/krasimir/react-webpack-starter. Es verwendet ES6, einschließlich ES6-Importe, transpiliert jedoch bis ES5.
Indem ich die Babel-Voreinstellung hackte, schaffte ich es, ES6 gebündelten Code auszuspucken. Ich habe die Datei node_modules/babel-Preset-es2015 zu:
module.exports = {
plugins: [
require("babel-plugin-transform-es2015-modules-commonjs")
]
};
Das ist natürlich keine akzeptable Lösung, was man tun muss, ist Bable Preset zu finden oder erstellen, die diese enthält.
Das erste, was ich danach bemerke, war, dass UglifyJS ES6 nicht unterstützt. Ich vermute, dass es noch weitere Probleme geben wird, also sollten Neulinge wie ich selbst vielleicht ein bisschen länger auf ES5 herumstreichen.
Danke für Ihre Antwort. Ich habe es versucht, aber es ist ein Fehler aufgetreten, seit ich versucht habe, ES6-Importe zu verwenden: Zeile 1: Unerwartetes Token Möglicherweise benötigen Sie einen geeigneten Loader, um diesen Dateityp zu verarbeiten. | Import Reagieren von 'reagieren'; | ReactDOM von 'react-dom' importieren; | Komponente aus './Component' importieren; Ich denke, das wird funktionieren, wenn CommonJS Import/Export (was ist meiner Meinung nach eine akzeptable Lösung für den Moment)? –
@HelgiBorg Webpack 1.x unterstützt keine Import-Syntax. Korrekt, Sie müssen 'require' verwenden oder die [transform-es2015-modules-commonjs'] (https://babeljs.io/docs/plugins/transform-es2015-modules-commonjs/) Transformation – CodingIntrigue
I hinzufügen fand dieses Beispiel: https://github.com/krasimir/react-webpack-starter. Es verwendet ES6, einschließlich ES6-Importe, transpiliert jedoch bis ES5. Indem ich die Babel-Voreinstellung hackte, schaffte ich es, ES6-gebündelten Code auszuspucken. Der Trick bestand darin, die Datei "babel-preset-es2015/index.js" auf "nur" herunterzufahren: require ("babel-plugin-transform-es2015-modules-commonjs"). Der nächste Schritt wäre, ein solches Preset zu finden oder zu erstellen. - Das ist natürlich nur ein kleiner Test, es wird Probleme geben. Der erste ist, dass UglifyJS ES6 nicht unterstützt. –