Question

我正在关注反应教程，但遇到一个错误，导致babel无法理解JSX：

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.

我已按如下方式安装了babel预设：

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

Answer 1

在您的网络包配置中，您指定只想为babel-loader中包含的.js文件应用./client/，但您的错误消息显示./components/App.js是导致问题，因为它不在./client/中，因此加载器不会应用于它。

因此，您既可以包含它们，也可以只排除node_modules，因为您需要转换项目的任何文件。请注意，这并不意味着您实际上会转换每个可能的文件，而只会转换您实际导入的文件。

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

Babel不使用babelrc中设置的反应预设

1 个答案: