巴别不使用在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);
答
在你的WebPack配置您可以指定只希望应用包括在./client/
的babel-loader
为.js
文件,但您的错误消息显示该./components/App.js
引起的问题,因为它不是在./client/
,因此装载机将不会被应用到它。
所以,你可以把它们作为好,还是只是排除node_modules
,因为你将要transpile项目的任何文件。请注意,这并不意味着你实际上transpile每一个可能的文件,但只有你实际导入。
{
test: /\.js$/,
exclude: /node_modules/,
loaders: [ 'babel-loader' ]
}