前言
随着 JavaScript 的不断发展和演变，我们经常会使用各种新的语言特性和语法糖来提高开发效率和代码质量。然而，这些新特性在一些旧版本的浏览器中并不被支持，从而导致了很多问题。为了解决这个问题，Babel 应运而生，它可以将最新的 JavaScript 代码转换为向后兼容的版本，从而使我们的代码可以在各种浏览器环境中顺利运行。
但是，在使用 Babel 进行开发的过程中，我们经常会遇到各种错误，其中最常见的错误就是 "Unexpected token"，这通常表示代码中使用了未定义的变量或函数，从而导致语法错误。在本文中，我们将介绍如何解决这个问题。
解决方法
检查 Babel 配置文件
在使用 Babel 进行开发时，我们需要使用配置文件 .babelrc 来指定 Babel 的插件和预设。一些插件和预设可能会影响到代码转换的结果，从而导致 "Unexpected token" 错误的发生。因此，我们需要检查 .babelrc 文件中的配置项，确保它们符合我们的要求。
例如，如果我们在代码中使用了 ES6 的箭头函数语法，那么我们就需要使用 babel-preset-env 插件来将它转换为 ES5 语法。正确的 .babelrc 配置如下：
-- -------------------- ---- ------- - ---------- - ------- - ---------- - ----------- ------ - ---------- ------- -- --- - -- - -展开代码
检查 Polyfill
一些新特性，例如 Promise 和 Object.assign 等，无法通过 Babel 进行转换，因为它们是语言规范的新增功能，并不能被转换成向后兼容的语法。因此，我们需要在代码中使用 Polyfill 来实现这些功能。
Polyfill 是一个可执行的 JavaScript 库，它在运行时检查环境是否需要进行补丁，如果需要的话就添加缺少的功能。在使用 Polyfill 时，我们需要确保它们被正确加载，并且在需要使用这些功能之前进行加载。
例如，如果我们想要在旧版浏览器中使用 Promise，我们需要在代码中引入 Promise 的 Polyfill，如下所示：
import 'babel-polyfill';
检查代码语法
最后，我们需要检查代码本身的语法问题。经常发生 "Unexpected token" 错误的原因是代码中使用了错误的语法，例如拼写错误、非法变量名等。为了找到这些问题，我们可以使用工具来进行静态代码分析，例如 ESLint 和 JSHint。
这些工具可以检查代码中的语法错误，并提供修复建议和代码风格建议。然后我们可以根据这些提示来进行代码修复。例如，如果我们使用了 var 而没有声明变量，ESLint 将会提示：
"no-undef": "error"
我们可以将变量声明为 let 或 const，或者使用 var 来明确声明变量。
总结
在使用 Babel 进行前端开发时，我们可能会遇到 "Unexpected token" 错误。解决这个问题的步骤包括检查 Babel 配置文件、检查 Polyfill 和检查代码语法。同时，我们也需要注意代码中可能出现的语法问题，以保证代码的正确性和可读性。通过这些方法，我们可以避免很多浏览器兼容性的问题，从而使我们的代码可以顺利运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646843e9968c7c53b0876e5d
