当我们在使用 Babel 编译 ES6 代码的时候，有时会遇到 "Cannot assign to read only property" 的错误。这是因为 ES6 中的常量和对象属性默认是只读的，当我们尝试修改它们的值时就会出现这个问题。在本文中我们将介绍两种解决方法。
解决方法一：使用 @babel/plugin-transform-object-assign
@babel/plugin-transform-object-assign 是一个 Babel 插件，它可以将 ES6 中的 Object.assign 转换为可读写的形式。这个插件可以解决大多数出现 "Cannot assign to read only property" 错误的情况。
首先安装 @babel/plugin-transform-object-assign：
npm install --save-dev @babel/plugin-transform-object-assign
在 .babelrc 文件中添加插件：
{ "plugins": [ "@babel/plugin-transform-object-assign" ] }
或者在 babel.config.js 文件中添加：
module.exports = { plugins: [ "@babel/plugin-transform-object-assign" ] }
这个插件默认会将所有 Object.assign 替换为 _objectAssign，如果你想定义替换为另一个名称，可以使用 transformerWithOptions 选项：
-- -------------------- ---- ------- -------------- - - -------- - - ---------------------------------------- - ------------------------- - --------------- ---------------- - - - - -
展开代码
这种解决方法可以解决大部分情况下的错误，但是如果你的代码中包含了不是通过 Object.assign 修改属性值的对象属性，那么这个方法就无法解决问题。这时候我们需要使用第二种解决方法。
解决方法二：使用 @babel/plugin-proposal-object-rest-spread
@babel/plugin-proposal-object-rest-spread 是一个 Babel 插件，它可以将 ES6 中的对象 REST/SPREAD 属性转换为可修改的形式。
首先安装 @babel/plugin-proposal-object-rest-spread：
npm install --save-dev @babel/plugin-proposal-object-rest-spread
在 .babelrc 文件中添加插件：
{ "plugins": [ "@babel/plugin-proposal-object-rest-spread" ] }
或者在 babel.config.js 文件中添加：
module.exports = { plugins: [ "@babel/plugin-proposal-object-rest-spread" ] }
这种解决方法可以解决包含 Object.assign 无法解决的问题，但是相对于方法一来说，它需要更多的运行时代码，对性能会有一定的影响。
下面是一个示例代码，演示了使用 @babel/plugin-transform-object-assign 和 @babel/plugin-proposal-object-rest-spread 两个插件解决 "Cannot assign to read only property" 错误的情况：
-- -------------------- ---- ------- -- -------- - ---------- - ---------------------------------------- ------------------------------------------- - - -- -------- ----- --- - - -- -- -- - -- -- -- ------------- ---- ------------------ - -- - --- -- ---- ----------- ------ ----- ------ - - ------- -- - -- ----------------- -- --- -- -- -- -------------------- -- --- -- -- --展开代码
作为一名前端开发人员，我们需要了解这些技术细节，并学会解决遇到的问题。使用 Babel 编译 ES6 代码是我们开发过程中必不可少的一环，了解如何解决 "Cannot assign to read only property" 错误也是我们必须要掌握的技能之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c760accc0f7239cdf18910
