随着 ES6（ECMAScript 2015）发布，很多开发者开始关注和使用它带来的新特性。但是，由于不是所有的浏览器都支持 ES6 语法，所以我们需要将 ES6 代码转译成 ES5 语法，以兼容旧版浏览器。
Babel 是一个非常流行的转译工具，可以将 ES6 代码转换为 ES5 代码。但是，在使用 Babel 进行转译时，我们可能会遇到一个常见的问题：SyntaxError: Unexpected identifier。这个问题的出现通常是因为在转译 ES6 代码时，Babel 没有正确地将其转换为 ES5 代码。本篇文章将会介绍这个问题的原因以及如何解决它。
问题原因
我们先来看一个例子：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
---------- -
------------------- ----------------
-
-
----- ------ - --- ----------------
------------------这是一个简单的 ES6 类的例子，通过 Babel 转译后，将会变成如下的 ES5 代码：
-- -------------------- ---- ------- ---- -------- -------- ------------------------- ------------ - -- ----------- ---------- ------------- - ----- --- ----------------- ---- - ----- -- - ----------- - - --- ------ - -------- ------------ - --------------------- -------- --------- - ----- -- ------------------------- - -------- -- - ------------------- - - --------- - ----- -- --- ------ - --- ---------------- ------------------
我们可以看到，Babel 将 ES6 的 class 转译为了 ES5 的函数声明和原型链。但是，如果我们在转译后的代码中使用了箭头函数，就会出现 “SyntaxError: Unexpected identifier” 的错误。例如，将上述的 sayHello() 改为箭头函数：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
-------- - -- -- -
------------------- ----------------
-
-
----- ------ - --- ----------------
------------------这个代码将会被 Babel 转译成：
-- -------------------- ---- -------
---- --------
--- ------ - -------- ------------ -
--- ----- - -----
--------------------- --------
------------- - -------- -- -
------------------- - - ---------- - -----
--
--------- - -----
--
--- ------ - --- ----------------
------------------当我们在此时运行代码时，将会遇到如下错误信息：
SyntaxError: Unexpected identifier
这是因为转换后的代码中，类的属性和方法被牢固地放置在了特定的范围内。这似乎是一个问题，因为当我们使用箭头函数时，Babel 并未正确地将它们放置在正确的范围内，从而导致了出现错误的代码。
解决方法
解决这个问题的方法有很多，其中之一是使用 Babel 的插件来确保该插件正确地处理箭头函数。
下面是使用 Babel 插件 transform-class-properties 修复上述错误的方式：
首先，使用 npm 安装 transform-class-properties 插件：
npm install --save-dev babel-plugin-transform-class-properties
然后，在 Babel 配置文件 .babelrc 或 babel-loader 中，添加该插件：
{
"plugins": ["transform-class-properties"]
}此时，我们可以运行代码而无需遇到错误了。
总结
在使用 Babel 转译 ES6 代码时，可能会遇到 “SyntaxError: Unexpected identifier” 的错误。这个问题通常是由于 Babel 没有正确地将 ES6 代码转换为 ES5 代码而导致的。解决这个问题的方法包括：使用 Babel 的插件来处理箭头函数，并将其放置在正确的范围内。
这个问题的解决方法可以帮助开发者更好地利用 ES6 新特性，更加方便地编写高效的代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b712d7add4f0e0fffac529