随着 ES6 的普及，越来越多的前端开发者开始使用 ES6 语法编写代码。然而，由于浏览器的兼容性问题，ES6 的代码并不能直接在所有的浏览器上运行。为了解决这个问题，我们可以使用 Babel 将 ES6 代码转换为 ES5 代码，以便在所有浏览器上运行。
然而，在使用 Babel 编译 ES6 代码时，有时会出现 unexpected token 错误，这是因为 Babel 默认只能识别 ES6 的部分语法，而不能识别所有的 ES6 语法。下面我们来看一下如何解决这个问题。
解决方法
1. 安装 Babel 插件
在使用 Babel 编译 ES6 代码时，我们需要安装一些 Babel 插件，以便 Babel 能够识别 ES6 语法。常用的 Babel 插件包括：
- @babel/preset-env：用于将 ES6+ 语法转换为 ES5 语法。
- @babel/plugin-proposal-class-properties：用于将 ES6 类的静态属性和实例属性转换为 ES5 代码。
- @babel/plugin-transform-runtime：用于将 ES6 的新 API 转换为 ES5 代码。
我们可以使用 npm 安装这些插件：
npm install @babel/preset-env @babel/plugin-proposal-class-properties @babel/plugin-transform-runtime --save-dev
2. 配置 Babel
安装好插件之后，我们需要在项目根目录下创建一个 .babelrc 文件，并配置 Babel 插件。示例配置如下：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
-------------- --------
--------- ------
-
-
--
---------- -
------------------------------------------
---------------------------------
-
-其中，useBuiltIns 和 corejs 用于配置 Babel 如何转换 ES6 代码中的新 API。useBuiltIns 可以设置为 usage 或 entry，usage 表示 Babel 只会转换代码中用到的新 API，entry 表示将所有新 API 都转换为 ES5 代码。corejs 表示使用哪个版本的 core-js 库来转换新 API。
3. 编译代码
配置好 Babel 插件之后，我们可以使用 Babel 编译 ES6 代码了。在命令行中执行以下命令：
npx babel src --out-dir lib
其中，src 表示源代码目录，lib 表示编译后的代码目录。
示例代码
下面是一个使用 ES6 语法编写的示例代码：
-- -------------------- ---- -------
----- ------ -
----------------- ---- -
--------- - -----
-------- - ----
-
---------- -
------------------- -- ---- -- ------------- --- ----------- ----- -------
-
-
----- - - --- ------------- ----
-------------如果直接使用 Babel 编译这段代码，会出现 unexpected token 错误。我们可以按照上面的步骤，安装 Babel 插件并配置 .babelrc 文件，然后使用下面的命令编译代码：
npx babel src --out-dir lib
编译后的代码如下：
-- -------------------- ---- -------
---- --------
--- ---------------------- - --------------------------------------------------------
--- ---------------- - -------------------------------------------------------------------------
--- ------------- - ----------------------------------------------------------------------
--- ---------
--- ------ - --------------------- -- -
-------- ------------ ---- -
--- ---------------------------------- --------
--------- - -----
-------- - ----
-
--- --------------------------------- --
---- -----------
------ -------- ---------- -
--------- - ---------------------------- -------- -- ---- -- ------------------- -- --- ------------------- - ----- ---------
-
----
------ -------
----
--- - - --- ------------- ----
-------------可以看到，Babel 将 ES6 代码转换为了 ES5 代码，从而避免了在浏览器中出现 unexpected token 错误。
总结
使用 Babel 编译 ES6 代码时，出现 unexpected token 错误可以通过安装 Babel 插件和配置 .babelrc 文件来解决。同时，我们也需要注意 Babel 只能识别 ES6 的部分语法，部分新 API 需要使用 @babel/plugin-transform-runtime 插件才能转换为 ES5 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65050fe195b1f8cacd1985df