„Sie können einen geeigneten Lader müssen diesen Dateityp zu handhaben“ mit Webpack und Babel

Question

Ich versuche Webpack mit Babel zu verwenden ES6 Vermögen zu kompilieren, aber ich folgende Fehlermeldung erhalten:

You may need an appropriate loader to handle this file type. 
| import React from 'react'; 
| /* 
| import { render } from 'react-dom' 

Hier ist das, was mein Webpack Config wie folgt aussieht:

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, die Verwendung von Webpack macht, ist:

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

Alle meine index.js-Datei importiert gerade, aber es scheint, als ob der 'babel-loader' nicht funktioniert.

Ich benutze 'babel-loader' 6.0.0.

Answer 1

Sie müssen die es2015 Preset installieren:

npm install babel-preset-es2015 

und konfigurieren babel-loader:

{ 
    test: /\.jsx?$/, 
    loader: 'babel-loader', 
    exclude: /node_modules/, 
    query: { 
     presets: ['es2015'] 
    } 
} 

Answer 2

Stellen Sie sicher, dass die es2015 babel voreingestellt installiert.

Ein Beispiel package.json devDependencies ist:

{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } 

fügen Sie eine .babelrc Datei in das Stamm:

"devDependencies": { 
    "babel-core": "^6.0.20", 
    "babel-loader": "^6.0.1", 
    "babel-preset-es2015": "^6.0.15", 
    "babel-preset-react": "^6.0.15", 
    "babel-preset-stage-0": "^6.0.15", 
    "webpack": "^1.9.6", 
    "webpack-dev-middleware": "^1.2.0", 
    "webpack-hot-middleware": "^2.0.0" 
}, 

Jetzt babel-loader in Ihrem webpack Config konfigurieren des Projekts, in dem sich die Knotenmodule befinden:

{ 
    "presets": ["es2015", "stage-0", "react"] 
} 

Weitere Informationen:

• babeljs.io - using babel with webpack

• babeljs.io - docs on .babelrc

• react-webpack-cookbook - configure react with webpack

• a react-webpack-example repo

Answer 3

Wenn Sie Webpack> 3 verwenden, müssen Sie nur babel-preset-env installieren, da diese Voreinstellung für es2015, es2016 und es2017 gilt.

var path = require('path'); 
let webpack = require("webpack"); 

module.exports = { 
    entry: { 
     app: './app/App.js', 
     vendor: ["react","react-dom"] 
    }, 
    output: { 
     filename: 'bundle.js', 
     path: path.resolve(__dirname, '../public') 
    }, 
    module: { 
     rules: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      use: { 
       loader: 'babel-loader?cacheDirectory=true', 
      } 
     }] 
    } 
}; 

Dieser nimmt seine Konfiguration aus meiner .babelrc Datei auf:

{ 
    "presets": [ 
     [ 
      "env", 
      { 
       "targets": { 
        "browsers":["last 2 versions"], 
        "node":"current" 
       } 
      } 
     ],["react"] 
    ] 
} 

Answer 4

Wenn Typoskript mit:

In meinem Fall habe ich die neuere Syntax von webpack v3 verwendet.11 von ihrer Dokumentation Seite Ich habe gerade die CSS-und Style-Loader-Konfiguration von ihrer Website kopiert. Der auskommentierte Code (neuere API) verursacht diesen Fehler, siehe unten.

module: { 
     loaders: [{ 
       test: /\.ts$/, 
       loaders: ['ts-loader'] 
      }, 
      { 
       test: /\.css$/, 
       loaders: [ 
        'style-loader', 
        'css-loader' 
       ] 
      } 
     ] 
     // , 
     // rules: [{ 
     //  test: /\.css$/, 
     //  use: [ 
     //   'style-loader', 
     //   'css-loader' 
     //  ] 
     // }] 
    } 

Der richtige Weg ist, dies zu setzen:

{ 
     test: /\.css$/, 
     loaders: [ 
      'style-loader', 
      'css-loader' 
     ] 
    } 

in der Anordnung der Lade Eigenschaft.