Babel nicht voreingestellten Satz in babelrc reagieren mit

Question

verfolge ich ein Tutorial reagieren aber einen Fehler stoßen, wodurch babel nicht JSX verstehen:

ERROR in ./components/App.js 
Module parse failed: /Users/mve04/dev/react-tests/components/App.js Unexpected token (4:11) 
You may need an appropriate loader to handle this file type. 
| 
| export default() => { 
|  return(<h1> hello from react </h1>); 
| } 
| 
@ ./client/index.js 11:11-39 
webpack: Failed to compile. 

Ich habe die babel installiert wie folgt voreingestellt:

npm install --save-dev babel-preset-react 

und meine .babelrc sieht wie folgt aus:

{ 
    "presets": ["es2015", "react" ] 
} 

Meine webpack Konfigurationsdatei sieht wie folgt aus:

import path from 'path'; 
import webpack from 'webpack'; 

export default { 
    entry: path.join(__dirname, '/client/index.js'), 
    output: {path: '/',}, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: [ 
      path.join(__dirname, 'client'), 
     ], 
     loaders: [ 'babel-loader' ] 
     } 
    ], 
    }, 
    resolve: { 
    extensions: ['.js'] 
    }, 
} 

und die App selbst sieht wie folgt aus:

import express from 'express'; 
import path from 'path'; 

import webpack from 'webpack'; 
import webpackMiddleware from 'webpack-dev-middleware'; 
import webpackConfig from '../webpack.config.dev' 


let app = express() 

app.use(webpackMiddleware(webpack(webpackConfig))); 

app.get('/*', (req, res) => { 
    res.sendFile(path.join(__dirname, './index.html')); 
}); 


app.listen(3000); 

Answer 1

In Ihrem webpack Config Sie festlegen, dass Sie nur die babel-loader für .js Dateien anwenden möchten, die in ./client/, aber Ihre Fehlermeldung zeigt enthalten sind dass ./components/App.js das Problem verursacht, weil es nicht in ./client/ ist und daher der Lader nicht darauf angewendet wird.

Sie können sie also auch entweder einschließen oder einfach node_modules ausschließen, weil Sie jede Datei Ihres Projekts transpilieren möchten. Beachten Sie, dass dies nicht bedeutet, dass Sie tatsächlich alle möglichen Dateien übertragen, sondern nur diejenigen, die Sie tatsächlich importieren.

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