webpack：babel-loader的语法错误 [英] webpack: syntax error with babel-loader

问题描述

我开始学习对教程的反应。但是 webpack 没有按预期工作。

I'm starting to learn react with a tutorial. But webpack is not working as expected.

所以这是我的简单 webpack.conf .js file。

So here is my simple webpack.conf.js file.

module.exports = {
    entry: "./app-client.js",
    output: {
        filename: "public/bundle.js"
    },
    module: {
        loaders: [
            {
                exclude: /(node_modules|app-server.js)/,
                loader: 'babel'
            }
        ]
    }
};

我也安装了所有模块：

npm install -g webpack
npm install webpack react babel-loader babel-core

但是当运行 webpack 时，我收到以下错误消息：

But when running webpack, I got the following error message:

ERROR in ./app-client.js
Module build failed: SyntaxError: app-client.js: Unexpected token (4:13)
  2 | var APP = require('./components/APP');
  3 | 
> 4 | React.render(<APP />, document.getElementById('react-container'));
    |              ^

根据我的理解， babel-loader 应该照顾那个。但看起来它没有付出努力。

In my understanding, babel-loader is supposed to take care of that. But it looks like it's not making the effort.

我缺少什么？

推荐答案

Babel 6本身不做任何事情。为了正确处理JSX，您需要在 .babelrc 文件中包含以下内容：

Babel 6 doesn't do anything by itself. In order to properly process JSX, you need to have the following in your .babelrc file:

{
    "presets": ["react"]
}

此外，您需要确保使用NPM安装该预设：

Also, you need to make sure you install that preset using NPM:

$ npm install --save-dev babel-core react react-dom babel-preset-react

一个好的起点是官方的React 入门页面

A good place to start is the official React getting started page

这篇关于webpack：babel-loader的语法错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！