在前端开发中，Babel 是一个非常常用的工具，可以将 ES6 或者更新的 JavaScript 代码转化为兼容性更好的代码。但是在使用 Babel 编译时，有时会出现 "SyntaxError: Unexpected token <" 错误，这个错误一般是由于 Babel 编译了 HTML 或者其他非 JavaScript 代码所引起的。
问题分析
在使用 Babel 编译时，一般是通过命令行或者配置文件来进行的。例如，在使用 webpack 构建项目时，我们可以在 webpack.config.js 文件中配置 Babel：
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
-- ---
--这个配置告诉 webpack 在编译 JavaScript 文件时使用 Babel，并且使用 @babel/preset-env 预设来转化代码。但是，如果我们的项目中存在 HTML 文件或者其他非 JavaScript 文件，并且这些文件被 webpack 加入了编译流程，那么 Babel 就会尝试编译这些文件，从而导致 "SyntaxError: Unexpected token <" 错误。
例如，假设我们的项目结构如下：
-------- --- ---- - --- -------- - --- ---------- --- -----------------
其中，index.js 是我们的 JavaScript 入口文件，index.html 是我们的 HTML 文件。如果我们在 webpack.config.js 中配置了 Babel，那么当我们运行 webpack 命令时，Babel 就会尝试编译 index.html 文件，从而导致 "SyntaxError: Unexpected token <" 错误。
解决方案
为了解决这个问题，我们需要告诉 Babel 不要编译 HTML 文件或者其他非 JavaScript 文件。有两种方法可以实现这个目的。
方法一：使用 exclude 选项
在 Babel 的配置中，我们可以使用 exclude 选项来排除某些文件或者目录。例如，在 webpack.config.js 中，我们可以将 HTML 文件排除在编译范围之外：
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
-
----- ----------
-------- ---------------
---- -
------- --------------
--
--
--
--
-- ---
--这个配置中，我们在第二个规则中添加了一个 exclude 选项，告诉 webpack 不要编译 node_modules 目录下的 HTML 文件。这样，Babel 就不会尝试编译 HTML 文件，从而避免了 "SyntaxError: Unexpected token <" 错误。
方法二：使用 include 选项
除了使用 exclude 选项之外，我们还可以使用 include 选项来明确告诉 Babel 编译哪些文件。例如，在 webpack.config.js 中，我们可以将 JavaScript 文件包含在编译范围之内：
-------------- - -
-- ---
------- -
------ -
-
----- --------
-------- ----------------------- -------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
-- ---
--这个配置中，我们使用 include 选项来明确告诉 webpack 只编译 src 目录下的 JavaScript 文件。这样，Babel 就不会尝试编译 HTML 文件，从而避免了 "SyntaxError: Unexpected token <" 错误。
总结
在使用 Babel 编译时，如果出现 "SyntaxError: Unexpected token <" 错误，一般是由于 Babel 尝试编译 HTML 或者其他非 JavaScript 代码所引起的。为了解决这个问题，我们可以使用 exclude 或者 include 选项来排除或者包含某些文件或者目录。通过合理的配置，我们可以避免这个错误，提高项目的编译效率。
示例代码：https://github.com/linjialiang/Blog/tree/main/Babel-SyntaxError-Unexpected-token
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6603aeadd10417a22202965e