Babel 运行时提示 Invalid assignment left-hand side
在进行前端开发过程中，使用 Babel 编译器来转换 ES6+ 语法是一个非常常见的操作。然而，有时候你可能会遇到一个错误：Invalid assignment left-hand side。接下来我们将详细解释这个错误的原因，并提供一些解决方案。
何为无效的赋值左值？
在 JavaScript 中，赋值表达式通常是这样的形式：left-hand side = right-hand side。左值指的是赋值运算符左边的一些变量或属性。例如，下面的代码中的 x 就是左值：
let x = 10;
当你使用赋值表达式的时候，左值必须是可写的，并且必须是一个标识符、一个点表达式或一个方括号表达式。例如：
let obj = {};
obj.foo = "bar";
obj["baz"] = "qux";然而，有些情况下，你会遇到 Babel 运行时提示 Invalid assignment left-hand side 的错误。下面我们来看看为什么会发生这种错误。
原因分析
通常，Babel 转换器的作用是将 ES6+ 语法转换成 ES5 语法，以保证代码可以在老版本的浏览器中正常运行。一些 ES6+ 赋值表达式有可能会被转换成不符合 JS 规范的代码，例如：
let [x, y] = [1, 2];
该语句运行时相当于是为 x 和 y 赋值，但在 ES5 中，这个语句可能被转换成类似下面这样的代码：
var _ref = [1, 2],
x = _ref[0],
y = _ref[1];其中，变量 _ref 就是一个对象（数组），这个对象上的属性是不能被赋值的，因此在这个表达式中，_ref 是一个“无效的赋值左值”，如果你尝试为 _ref 赋值，就会触发 Invalid assignment left-hand side 错误。
解决方法
解决这个问题有若干种方法，我们分别介绍如下：
- 将代码改写为符合规范的写法
很明显，避免这个错误的最简单的解决方案就是让代码符合规范，正确使用赋值表达式。例如，在上面的例子中，我们可以把赋值表达式写成这样：
let x, y; [x, y] = [1, 2];
这样代码就符合规范了，也可以避免这个错误。
- 禁用某些 Babel 转换器
如果你不想改写代码，也可以考虑禁用某些 Babel 转换器，让这些转换器不去使用“无效的赋值左值”（也就是数组或对象）。你可以在 .babelrc 文件中增加下面的配置项，让 Babel 不去解析 destructuring（解构赋值）：
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
--------- ----
-
-
-
--
---------- -
------------------------------------- - --------- ---- ---
------------------------------------------- - -------- ---- ---
---------------------------------
--
--------- -
---------------
---------------
---------------
----------------
---------------
-
-- 使用不同版本的 Babel
某些特定版本的 Babel 可能存在一些问题，因此如果你遇到了 Invalid assignment left-hand side 错误，可以尝试使用不同的 Babel 版本来解决问题。
总结
Invalid assignment left-hand side 是一个很常见的错误，一般是在使用 Babel 编译器时出现的，通常是由于 ES6+ 的某些语法转换时出现了问题。如果你遇到了这个错误，不要担心，我们提供了上述三种解决方法，你可以根据具体情况选择一种方案来解决问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646de11b968c7c53b0c80bae