Babel 是前端开发中非常常用的一个工具，可以将 ES6/7/8 语法转换成浏览器可以识别的 ES5 语法。但在使用 Babel 编译时，我们常常会遇到 "Unexpected Token" 的错误，这是由于编译器无法识别代码中的某些符号或语法导致的。本文将帮助你解决这些常见的问题。
1. 函数参数默认值
在 ES6 中，我们可以为函数的参数设置默认值，例如：
function foo(x = 1, y = 2) {
console.log(x + y);
}但是，在使用 Babel 进行编译时，会出现 "Unexpected Token" 错误。这是因为在 ES5 中没有这种语法，所以 Babel 需要将其转换为 ES5 语法。针对这个问题，我们需要安装插件 "@babel/plugin-transform-parameters"，并在 .babelrc 文件中添加如下配置：
{
"plugins": [
"@babel/plugin-transform-parameters"
]
}2. 对象属性简写
ES6 中，我们可以使用对象属性简写的语法，例如：
const foo = 'bar';
const obj = { foo };但是，Babel 编译时会出现 "Unexpected Token" 的错误。针对这个问题，我们需要安装插件 "@babel/plugin-transform-shorthand-properties"，并在 .babelrc 文件中添加如下配置：
{
"plugins": [
"@babel/plugin-transform-shorthand-properties"
]
}3. 异步函数
ES7 中，我们可以使用 async/await 语法来处理异步代码，例如：
async function foo() {
const result1 = await fetch(url1);
const result2 = await fetch(url2);
return [result1, result2];
}但是，Babel 编译时同样会出现 "Unexpected Token" 的错误。针对这个问题，我们需要安装插件 "@babel/plugin-transform-async-to-generator"，并在 .babelrc 文件中添加如下配置：
{
"plugins": [
"@babel/plugin-transform-async-to-generator"
]
}示例代码
-- -------------------- ---- -------
-- --------
-
---------- -
-------------------------------------
-----------------------------------------------
--------------------------------------------
-
-
-- --- --
-------- ----- - -- - - -- -
----- --- - - -- - --
------ ----
-
----- -------- ----- -
----- ------ - ----- -----------
------ -------
-
-- ---- --- --
---- --------
-------- ------------------- -- - ------ -------------------- -- -------------------------- -- -- ------------------- -
-------- ------------------ - ----- --- ------------------ ------- -- ----------- ------------ ----------- -
-------- -------------------------- -- - --- ---- - --- --- -- - ----- --- -- - ------ --- -- - ---------- --- - --- ---- -- - ----------------------- --- ---- - --- - ----------------- -- - ----- - -- ---- - -------------------- --- -- ------ - - ----- ----- - -- - - ------ --- -- - ------- - --- - -- ---- -- ------------ -- ----- --------------- - ------- - -- ---- ----- --------- - - ------ ----- -
-------- -------------------- - -- -------------------- ------ ---- -
-------- ----- -
--- - - ---------------- - - -- ------------ --- --------- - ------------ - --
--- - - ---------------- - - -- ------------ --- --------- - ------------ - --
--- --- - -
-- --
-- -
--
------ ----
-
-------- ----- -
------ ---------------- -----------
-
-------- ------ -
---- - ------------------
-------------
-------------------------------- --------- -
--- -------
------ -------------------------------- ------------------ -
----- --- -
------ -------------- - -------------- -
---- --
------------- - --
------ -----------
---- --
------ - --------------
------ ------------------------- --------
---- --
---- ------
------ ----------------
-
-
-- ---------
----
------ ---------------- -----------
-
结论
使用 Babel 编译时，可能会遇到 "Unexpected Token" 的错误。通过安装相应的插件以及在 .babelrc 文件中添加配置，我们可以轻松解决这些问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6703b87bd91dce0dc84c5a86