小编典典

webpack:babel-loader的语法错误

reactjs

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

这是我的简单webpack.conf.js文件。

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,出现以下错误消息:

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应该照顾好这一点。但是看起来好像没有付出努力。

我想念什么?


阅读 281

收藏
2020-07-22

共1个答案

小编典典

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

{
    "presets": ["react"]
}

另外,您需要确保使用NPM安装该预设:

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

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

2020-07-22