什么是 jscodeshift？
jscodeshift 是一个强大的 JavaScript 代码转换工具，其主要用途是将旧代码库迁移到新的代码库。它可以快速地在已有代码库中进行全局性重构，而且支持自定义插件。
什么是 generator-jscodeshift？
generator-jscodeshift 是 jscodeshift 的一个 Yeoman 生成器，它能够生成符合 jscodeshift 标准的转换脚本模板。
安装 generator-jscodeshift
generator-jscodeshift 可以便捷地通过 npm 安装。打开终端，输入以下命令：
npm install -g generator-jscodeshift
安装完成后，你的电脑就可以使用 jscodeshift 命令了。
使用 generator-jscodeshift
在你想要执行代码转换操作的项目根目录下，输入以下命令：
yo jscodeshift
此时将会看到一个提示框，要求你输入一个转换的名称。这个名称将作为你的转换脚本名称。接着，它会询问你是否要在开始时使用示例转换。
如果你选择了示例转换，那么 generator-jscodeshift 会自动在当前目录中生成一个名为 <TransformName>.js 的文件。如果你没有选择示例转换，那么你需要自行在项目根目录中创建一个名为 <TransformName>.js 的文件。
修改转换脚本
生成的转换脚本一般包含两个主要部分：一个 transform 方法和对于 test 方法的引用。其中，transform 方法是用于进行实际代码转换的核心部分。如果你使用 generator-jscodeshift 的示例转换，那么 transform 方法中将包含基础的转换逻辑。
下面是一个基础示例转换代码：
-- -------------------- ---- -------
------ ------- -------- ----------------- ---- -
----- - - ----------------
----- --- - ---------------
----------------------------------- -- -
-- --------------- --- ------ -
-----------------------------------------
-
---
------ ---------------
-在这个示例中，transform 方法遍历了代码文件中的每一个标识符，并将其中名称为 "foo" 的标识符替换为 "bar" 标识符。你可以根据需求修改这里的逻辑。
你还需要根据自己的需要修改对于 test 方法的引用。test 方法是用于测试你的转换脚本是否正确的主要手段。因此，你应当根据你的具体需求修改这里的测试用例。
运行转换脚本
在修改完转换脚本后，可以使用以下命令来执行脚本：
jscodeshift -t <TransformName>.js <files>
其中，<TransformName> 是你的转换脚本名称，<files> 则是指定的待转换文件/文件夹。
注意，运行转换脚本后，修改的所有代码将会被替换为转换脚本中定义的新代码。
示例
下面为一个更复杂的示例。该示例将会将所有的类组件进行转换，将它们转换为无状态组件。
-- -------------------- ---- -------
------ ------- -------- ----------------- ---- -
----- - - ----------------
----- --- - ---------------
-- -- --------
----------------------------------------- -- -
-- -- --------
----- --------- - ------------------
-- -- -------- -----
--- -------- - ------
----
---------------------- - ---- - ----- ------- -- ------- ----- --
----------- -- -
-------- - -----
---
-- -- ------------
----- ----------- - ---------------------
-----
--------------------
- -----------------------
- -
-----------------
--------------------------------------- -----------------------
-----------------------------------
--
--
------------------------- - -- - ------------------------------------
--
-- ---------------------- -
------------------------------
------------------------------ -
---------------------
---------------------
--------------------------- ------------------------
-
--
--
--------------------------------------------------------------------
-
-- -- -------
--------------------
------------------------------ -
---------------------
------------------------
-------------------------------------- --------------
-
--
--
---
------ ---------------
-使用上述示例代码，你可以大大简化你的 React 代码库，减少代码量，提高代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005681581e8991b448e4385