在前端开发中，使用 Babel 来转换 ES6 代码是非常常见的。而 @gerhobbelt/babel-helper-simple-access 是 Babel 插件中的一个小工具，用于生成访问对象属性的代码，是十分实用的。本文将介绍如何进行安装和使用。
安装
使用 npm 进行安装：
npm install @gerhobbelt/babel-helper-simple-access
使用
在 Babel 插件中使用：
-- -------------------- ---- -------
----- ------------ - --------------------------------------------------
----- ------- - -
---------------------- -
------------------ ------ -- -
------------------------ -----------
---
--
--
-- -- ----- ----
----- -------- - -- ------ - -- -- --
----- ------------
--------
---
-------------- - ---------在上述示例代码中，我们引入了 simpleAccess 工具，并在 MemberExpression 语法树遍历时使用它。每次访问对象属性时，simpleAccess 用回调函数获取访问该属性的表达式，打印下该属性名。
示例代码
假设我们需要将如下代码进行转换：
const obj = {
a: {
b: 1,
},
};
const b = obj.a.b;实际上，我们可以通过 simpleAccess 工具自动生成如下代码：
const obj = {
a: {
b: 1,
},
};
const _obj$a = obj.a,
b = _obj$a.b;我们可以按照如下编写一个 Babel 插件进行转换：
-- -------------------- ---- -------
----- ------------ - --------------------------------------------------
----- ------- - -
------------------------- -
----- ----------- - ---
-------------------------------------------------- -- -
--------------------------------------- ------ -- -
----- ---------- - --------------------- -- ------- --- -----------
-- ------------ -
-------
-
-----------------------
---
---
-- ------------------- --- -- -
-------
-
----- ----------- - ---
--- ---- - - -- - - ------------------- ---- -
----- -- - ---------------
----- ------------- - ------------------------------------------
---------------------
-----------------
--- --------------
----- -------------------
-------------------------- --- ----- - ------------- - ---------------------------------
---------------------
--
---
-
----- ---- - -------------------------------
-----------------
------------------------------------- -
----------------------------- -------------------------------------------------- ------ ------------------
--
--
--
--
----- -------- - -- ------ - -- -- --
----- --------------
--------
---
-------------- - ---------这个插件会将 const b = obj.a.b; 转换成 const _obj$a = obj.a, b = withSimpleAccess(_obj$a, _obj$a.b);。
总结
借助 npm 包 @gerhobbelt/babel-helper-simple-access，我们可以方便地生成访问对象属性的代码。在实际项目中，我们可以使用它简化 ES6 代码的转换，提升开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f02f625403f2923b035bdf0