问题描述
在使用 Babel 编译 ES6 代码时，有时会出现类似于以下错误信息：
------------ ---------- ----- -
这个错误信息通常是由于在编译过程中出现了解析错误所导致的。通常情况下，这个错误的原因可能是由于在使用Webpack打包时，配置文件出现错误，或者是使用Babel编译ES6代码时出现错误。
解决方案
通常情况下，解决这个问题的方法取决于具体的错误信息。但是，在绝大多数情况下，以下几个解决方案都可能会解决这个问题。
检查文件路径
通常情况下，Unexpected token < 的错误信息出现时，这个错误的原因可能是由于不正确的文件路径所导致的。因此，检查文件路径是一个解决问题的好方法。
如果你使用的是相对路径，可能会导致无法正确的解析你的代码。为了解决这个问题，你可以使用绝对路径来指定文件路径。比如使用“./”来表示当前文件夹，使用“../”来表示上一级文件夹。
确认 Babel 和相关库已正确安装
如果你的Babel 和相关库没有正确安装，那么也可能会导致这个问题的出现。为了解决这个问题，你可以使用以下命令安装Babel和相关库：
--- - -- ----------- ---------- -----------------
另外，还需要在项目的根目录下创建一个.babelrc文件，并添加以下内容:
- ---------- --------------------- -
这里的@babel/preset-env是一个Babel的预设，它包含了所有ES6特性的编译规则。
确认 Babel 已正确配置
如果Babel没有正确的配置，那么也可能会导致这个问题的出现。为了解决这个问题，我们需要编辑webpack.config.js文件，并添加以下内容：
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
--这里的配置文件中，我们使用babel-loader加载器，将我们的ES6代码编译成ES5代码。同时，我们需要将@babel/preset-env预设传递给编译器，这样才能正确的编译我们的代码。
码上调试
如果以上方法都不起作用，那么我们还可以进行码上调试。通常，我们可以通过打印一些调试信息，找出出错的地方。
下面是一个示例代码，在使用 Babel 编译 ES6 代码时，出现了Unexpected token <的错误信息：
-------- --------- - ------ - - -- - -----------------------
我们可以在代码前面添加debugger语句，然后使用Chrome浏览器打开调试工具，就可以查看到在哪个地方出现了错误：
--------- -------- --------- - ------ - - -- - -----------------------
总结
Unexpected token <问题是在使用 Babel 编译 ES6 代码时经常遇到的一个问题，其原因通常是由于不正确的文件路径、Babel和相关库未正确安装和配置文件的错误等问题所导致的。我们可以通过检查文件路径，确认Babel和相关库已正确安装，确认Babel已正确配置和进行码上调试等方法来解决这个问题。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6528e9d67d4982a6ebb777c6