Babel 未使用 babelrc 中设置的反应预设答案

【问题标题】：Babel not using react preset set in babelrcBabel 未使用 babelrc 中设置的反应预设
【发布时间】：2017-02-18 00:27:23
【问题描述】：

我正在关注 react 教程，但遇到 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);

【问题讨论】：

标签： reactjs babeljs

【解决方案1】：

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

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

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

【讨论】：