Ich versuche, Webpack mit Babel zum Kompilieren von ES6-Assets zu verwenden, erhalte jedoch die folgende Fehlermeldung:
You may need an appropriate loader to handle this file type.
| import React from 'react';
| /*
| import { render } from 'react-dom'
So sieht meine Webpack-Konfiguration aus:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './index',
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/dist/'
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/
}
]
}
}
Hier ist der Middleware-Schritt, der Webpack verwendet:
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var config = require('./webpack.config');
var express = require('express');
var app = express();
var port = 3000;
var compiler = webpack(config);
app.use(webpackDevMiddleware(compiler, {
noInfo: true,
publicPath: config.output.publicPath
}));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
app.listen(port, function(err) {
console.log('Server started on http://localhost:%s', port);
});
Alles, was meine index.js-Datei tut, ist das Importieren von React, aber es scheint, dass der 'Babel-Loader' nicht funktioniert.
Ich benutze 'Babel-Loader' 6.0.0.
Antworten:
Sie müssen die
es2015
Voreinstellung installieren :und dann konfigurieren
babel-loader
:quelle
Stellen Sie sicher, dass Sie die Babel-Voreinstellung es2015 installiert haben.
Ein Beispiel für package.json devDependencies ist:
Konfigurieren Sie nun den Babel-Loader in Ihrer Webpack-Konfiguration:
Fügen Sie eine .babelrc- Datei zum Stammverzeichnis Ihres Projekts hinzu, in der sich die Knotenmodule befinden:
Mehr Info:
babeljs.io - mit babel mit webpack
babeljs.io - docs auf .babelrc
React-Webpack-Kochbuch - Konfigurieren Sie React mit Webpack
quelle
Wenn Sie Webpack> 3 verwenden, müssen Sie nur installieren
babel-preset-env
, da diese Voreinstellung es2015, es2016 und es2017 berücksichtigt.Dies übernimmt seine Konfiguration aus meiner
.babelrc
Datei:quelle
Aufgrund von Aktualisierungen und Änderungen im Laufe der Zeit führt die Versionskompatibilität zu Problemen bei der Konfiguration.
Ihre webpack.config.js sollte so sein, dass Sie auch konfigurieren können, wie immer Sie die Passform verringern.
Eine weitere Sache, die Sie bemerken sollten, ist die Änderung der Argumente. Lesen Sie die Babel-Dokumentation https://babeljs.io/docs/en/presets
NB: Sie müssen sicherstellen, dass die oben genannten @ babel / preset-env & @ babel / preset-react in Ihren package.json-Abhängigkeiten installiert sind
quelle
@babel/preset-react
es für mich behoben.BABEL TEAM UPDATE:
Wir freuen uns sehr, dass Sie versuchen, die ES2015-Syntax zu verwenden, aber anstatt die jährlichen Voreinstellungen fortzusetzen, empfiehlt das Team die Verwendung von babel-preset-env. Standardmäßig hat es das gleiche Verhalten wie die vorherigen Voreinstellungen zum Kompilieren von ES2015 + auf ES5
Wenn Sie Babel Version 7 verwenden, müssen Sie npm install @ babel / preset-env ausführen und "presets": ["@ babel / preset-env"] in Ihrer
.babelrc
Konfiguration haben.Dadurch werden alle neuesten Funktionen zu es5-transpiliertem Code kompiliert:
Voraussetzungen :
Schritt 1 :: npm install --save-dev @ babel / preset-env
Schritt 2: Um
JSX
Code in es5 zu kompilieren , bietet babel ein@babel/preset-react
Paket zum Konvertieren von Reactjsx
Erweiterungsdatei in verständlichen Code des nativen Browsers.Schritt 3: npm install --save-dev @ babel / preset-react
Schritt 4: Erstellen Sie eine
.babelrc
Datei im Stammpfad Ihres Projekts, sofernwebpack.config.js
vorhanden.Schritt 5: webpack.config.js
quelle
Bei Verwendung von Typescript:
In meinem Fall habe ich die neuere Syntax von Webpack v3.11 von der Dokumentationsseite verwendet. Ich habe gerade die CSS- und Style Loader-Konfiguration von ihrer Website kopiert. Der auskommentierte Code (neuere API) verursacht diesen Fehler, siehe unten.
Der richtige Weg ist, dies auszudrücken:
im Array der Loader-Eigenschaft.
quelle
Dieser wirft mich für eine Spritztour. Angular 7, Webpack Ich habe diesen Artikel gefunden, daher möchte ich den Artikel https://www.edc4it.com/blog/web/helloworld-angular2.html gutschreiben
Was ist die Lösung: // auf Ihrer Komponentendatei. Vorlage als Webpack verwenden behandelt sie als Textvorlage: require ('./ process.component.html')
damit das Karma es interpretiert, npm install add html-loader --save-dev {test: /.html$/, benutze: "html-loader"},
Hoffe das hilft jemandem
quelle