Babel 编译 React 项目遇到 Unexpected token “<” 怎么办？

在使用 React 进行前端开发时，我们通常会使用 Babel 来将我们的 JSX 语法转译成纯 JavaScript。但是在实际开发中，我们有时候会遇到一个令人困惑的问题：当执行编译后的代码时，会出现 Unexpected token “<” 的错误。这个错误是怎么发生的？我们应该怎么解决呢？

问题原因

这个错误通常是由于在 JSX 语法上没有使用正确的 Babel 插件所致。在我们使用 JSX 时，本质上是在 JavaScript 中嵌入了 XML 语法。但是，JavaScript 引擎无法理解这种语法，因此我们需要借助 Babel 将 JSX 转译成 JavaScript。

不过，Babel 并不能自动识别 JSX 语法。需要使用 @babel/plugin-transform-react-jsx 进行转译。问题就出在了这里。如果我们没有在 Babel 配置中加入这个插件，那么就会出现这个错误。

解决方法

解决这个问题的方法很简单。我们只需要在项目中安装 @babel/plugin-transform-react-jsx，并在 .babelrc 文件中配置插件即可。

安装插件

我们可以使用 npm 或者 yarn 安装插件：

npm install --save-dev @babel/plugin-transform-react-jsx

yarn add --dev @babel/plugin-transform-react-jsx

配置插件

在 .babelrc 文件中添加插件的配置。

// www.javascriptcn.com code example
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    "@babel/plugin-transform-react-jsx"
  ]
}

这里我们已经使用 @babel/preset-react 这个预设来启用了 JSX 的支持。同时我们添加了 @babel/plugin-transform-react-jsx 插件。这样就可以解决出现 Unexpected token “<” 错误了。

示例代码

以下是一个简单的 React 组件，它将 Hello, World! 渲染到屏幕上。这个组件使用了 JSX 语法。

// www.javascriptcn.com code example
import React from 'react';

class HelloWorld extends React.Component {
  render() {
      return <h1>Hello, World!</h1>;
  }
}

export default HelloWorld;

使用 Babel 转译后的代码如下：

// www.javascriptcn.com code example
"use strict";

var _react = _interopRequireDefault(require("react"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

var HelloWorld =
/*#__PURE__*/
function (_React$Component) {
  _inherits(HelloWorld, _React$Component);

  function HelloWorld() {
    _classCallCheck(this, HelloWorld);

    return _possibleConstructorReturn(this, _getPrototypeOf(HelloWorld).apply(this, arguments));
  }

  _createClass(HelloWorld, [{
    key: "render",
    value: function render() {
      return _react["default"].createElement("h1", null, "Hello, World!");
    }
  }]);

  return HelloWorld;
}(_react["default"].Component);

exports["default"] = HelloWorld;

我们可以看到，JSX 语法已经成功被转化为了纯 JavaScript（使用 React.createElement() 方法）。

结语

Babel 是 React 生态圈中的一个重要组件，它帮助我们将 JSX 语法转化成有效的 JavaScript 代码。当出现 Unexpected token “<” 错误时，我们应该考虑是否在 Babel 配置中正确地配置了插件。只需要安装 @babel/plugin-transform-react-jsx 并在 .babelrc 中配置即可。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bea3590c976d473a2b85d8