巴別不使用在babelrc

反應預設的一組我下面一個反應教程，但遇到錯誤，由此巴別無法理解JSX：巴別不使用在babelrc

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.

我已經安裝預設爲巴別如下：

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

我.babelrc看起來是這樣的：

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

我的WebPack配置文件看起來是這樣的：

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'] 
    }, 
}

和應用程序本身看起來是這樣的：

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

來源

2017-02-18 Mike Vella

在你的WebPack配置您可以指定只希望應用包括在./client/的babel-loader爲.js文件，但您的錯誤消息顯示該./components/App.js引起的問題，因爲它不是在./client/，因此裝載機將不會被應用到它。

所以，你可以把它們作爲好，還是隻是排除node_modules，因爲你將要transpile項目的任何文件。請注意，這並不意味着你實際上transpile每一個可能的文件，但只有你實際導入。

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

來源

2017-02-18 00:50:53

巴別不使用在babelrc

回答

相關問題