javascript - Babel 加载器无法导入 React

Question

我使用 babel loader 和 webpack 来组合多个 React 组件。虽然我已经安装了 webpack 和 babel-loader 及其依赖项。我收到两个错误:

ERROR in ./components/layout.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/layout.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react';
| 
| class Layout extends React.Component {
 @ ./build/import.js 15:14-49

ERROR in ./components/topic-list.jsx
Module parse failed: /Users/myuser/Desktop/Projects/Demo/Scorecard/SPA/React/components/topic-list.jsx Line 17: Unexpected token <
You may need an appropriate loader to handle this file type.
|     render: function () {
|         return (
|             <div>
|                 <div className="row topic-list">
|                     <SingleTopicBox 
 @ ./build/import.js 11:17-56

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'build');
var APP_DIR = path.resolve(__dirname, 'build');

module.exports = {
    entry: APP_DIR + '/import.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            include: APP_DIR,
            loader: 'babel',

            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
          }
        ],
        resolve: {
          extensions: ['', '.js', '.jsx']
        }
    }
};

导入.js

import React from 'react';
import ReactDOM from 'react-dom';
import TopicsList from '../components/topic-list.jsx';
import Layout from '../components/layout.jsx';

layout.jsx

import React from 'react';

class Layout extends React.Component {

    render() {
        return (
            <div className="container">
                <TopicsList />

            </div>
        );
    }
};

ReactDOM.render(<Layout />, document.getElementById('app'));

Answer 1

从 webpack.config.js 文件中删除 include 选项。 Include 文件夹应该是 webpack 可以在其中找到你的加载器的文件夹，在本例中是 babel loader