问题描述
在使用 Babel 编译 ES6 代码时，经常会出现 SyntaxError: Unexpected token 的错误。这个错误的原因是因为 Babel 默认只转换语法，而没有转换 ECMAScript 新语法引入的新的 API，如 Promise、Generator 等。因此，导致在低版本浏览器或 Node.js 中使用转换后的代码时，会出现兼容性问题。
解决方案
解决这个问题的方法有两种：
- 安装插件：通过安装 Babel 的插件，实现对新语法引入的 API 的转换。
- 使用 polyfill：引入 polyfill 库，让低版本浏览器或 Node.js 也能够支持新语法引入的 API。
安装插件
为了让 Babel 能够转换新的 API，可以通过安装对应的 Babel 插件来实现。
以 @babel/polyfill 插件为例。
- 安装
@babel/polyfill插件：
--- ------- --------------- ----------
- 在代码入口文件（如
index.js）中引入@babel/polyfill插件：
------ ------------------
这样，@babel/polyfill 插件会自动将当前 JavaScript 环境中缺失的新语法引入的 API 转换成当前 JavaScript 环境所支持的 API。
使用 polyfill
polyfill 库是一种适用于低版本浏览器或 Node.js 的库，用来实现缺失的新语法引入的 API 功能。
以 core-js 库为例。
- 安装
core-js库：
--- ------- ------- ----------
- 在代码入口文件（如
index.js）中引入需要的 polyfill：
------ ----------------- ------ ------------------------------
其中，core-js/stable 包含了所有新语法引入的 API 的垫片，而 regenerator-runtime/runtime 包含了 Generator 相关的 API 垫片。
这样，使用了 polyfill 库之后，新语法引入的 API 就可以在低版本浏览器或 Node.js 中使用了。
示例代码
为了演示 Babel 编译 ES6 时出现的 SyntaxError: Unexpected token 问题以及解决方法，我们可以创建一个简单的项目，并使用示例代码演示具体的解决方案。
- 创建项目
----- ---------- -- ---------- --- ---- --
- 安装依赖
--- ------- ------------ ----------- ----------------- ------- ----------- --
安装 babel-loader、@babel/core、@babel/preset-env、webpack、webpack-cli。
- 创建
webpack.config.js文件
在项目根目录下创建 webpack.config.js 文件，并添加以下内容：
-------------- - -
------ -----------------
------- -
----- --------- - --------
--------- -----------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ---------------------
-
-
-
-
-
-这个配置文件指定了入口文件、输出文件、以及 babel-loader 的配置。
- 创建
src目录
在项目根目录下创建 src 目录，并添加 index.js 文件。
----- ------- - --- ----------------- -- -
------------- -- -
--------------- --------
-- ------
---
------------------- -- -
------------------
---这个代码使用了 Promise。
- 构建项目
在命令行中执行以下命令，构建项目：
--- -------
这个命令会生成 dist 目录及其输出文件。使用低版本浏览器或 Node.js 运行输出文件时，会出现 SyntaxError: Unexpected token 的错误。
我们可以尝试在低版本浏览器或 Node.js 中运行输出文件，看是否能成功。
- 解决问题
- 安装插件
在项目中安装 @babel/polyfill 插件。
--- ------- --------------- ----------
修改 src/index.js 文件，添加 import '@babel/polyfill'; 语句。
------ ------------------
----- ------- - --- ----------------- -- -
------------- -- -
--------------- --------
-- ------
---
------------------- -- -
------------------
---重新构建项目：
--- -------
使用低版本浏览器或 Node.js 运行输出文件，看是否能成功。
- 使用 polyfill
在项目中安装 core-js 库。
--- ------- ------- ----------
修改 src/index.js 文件，使用 core-js 库来实现缺失的 API 功能。
------ -----------------
------ ------------------------------
----- ------- - --- ----------------- -- -
------------- -- -
--------------- --------
-- ------
---
------------------- -- -
------------------
---重新构建项目：
--- -------
使用低版本浏览器或 Node.js 运行输出文件，看是否能成功。
总结
Babel 编译 ES6 代码时出现 SyntaxError: Unexpected token 错误，通常是因为新语法引入的 API 第三方库未来得及兼容前导致，这时可以通过安装插件或使用 polyfill 库解决问题。使用 polyfill 库是一种更通用、更稳定、更灵活的解决方案，建议在项目中使用 polyfill 库来保证新语法引入的 API 的兼容性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6527cdba7d4982a6eba65ab4