如何解决使用 Babel 编译 ES6 时出现的 Unexpected token < 问题-JavaScript中文网-JavaScript教程资源分享门户

问题描述

在使用 Babel 编译 ES6 代码时，有时会出现类似于以下错误信息：

SyntaxError: Unexpected token <

这个错误信息通常是由于在编译过程中出现了解析错误所导致的。通常情况下，这个错误的原因可能是由于在使用Webpack打包时，配置文件出现错误，或者是使用Babel编译ES6代码时出现错误。

解决方案

通常情况下，解决这个问题的方法取决于具体的错误信息。但是，在绝大多数情况下，以下几个解决方案都可能会解决这个问题。

检查文件路径

通常情况下，Unexpected token < 的错误信息出现时，这个错误的原因可能是由于不正确的文件路径所导致的。因此，检查文件路径是一个解决问题的好方法。

如果你使用的是相对路径，可能会导致无法正确的解析你的代码。为了解决这个问题，你可以使用绝对路径来指定文件路径。比如使用“./”来表示当前文件夹，使用“../”来表示上一级文件夹。

确认 Babel 和相关库已正确安装

如果你的Babel 和相关库没有正确安装，那么也可能会导致这个问题的出现。为了解决这个问题，你可以使用以下命令安装Babel和相关库：

npm i -D @babel/core @babel/cli @babel/preset-env

另外，还需要在项目的根目录下创建一个.babelrc文件，并添加以下内容:

{
  "presets": ["@babel/preset-env"]
}

这里的@babel/preset-env是一个Babel的预设，它包含了所有ES6特性的编译规则。

确认 Babel 已正确配置

如果Babel没有正确的配置，那么也可能会导致这个问题的出现。为了解决这个问题，我们需要编辑webpack.config.js文件，并添加以下内容：

// javascriptcn.com 代码示例
module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"]
          }
        }
      }
    ]
  }
};

这里的配置文件中，我们使用babel-loader加载器，将我们的ES6代码编译成ES5代码。同时，我们需要将@babel/preset-env预设传递给编译器，这样才能正确的编译我们的代码。

码上调试

如果以上方法都不起作用，那么我们还可以进行码上调试。通常，我们可以通过打印一些调试信息，找出出错的地方。

下面是一个示例代码，在使用 Babel 编译 ES6 代码时，出现了Unexpected token <的错误信息：

function square(n) {
  return n * n;
}

console.log(square(2));

我们可以在代码前面添加debugger语句，然后使用Chrome浏览器打开调试工具，就可以查看到在哪个地方出现了错误：

debugger;

function square(n) {
  return n * n;
}

console.log(square(2));

总结

Unexpected token <问题是在使用 Babel 编译 ES6 代码时经常遇到的一个问题，其原因通常是由于不正确的文件路径、Babel和相关库未正确安装和配置文件的错误等问题所导致的。我们可以通过检查文件路径，确认Babel和相关库已正确安装，确认Babel已正确配置和进行码上调试等方法来解决这个问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6528e9d67d4982a6ebb777c6