代码化的家
作为Atlaskit中组件的lide模式转换的一部分,我们发现 codemods 与 j 代码转换 这对我们的消费者 带来一些突破性变化非常有益 然而,对于我们需要写和维持它们的人来说,一个痛苦点是,我们必须在许多地方复制-复制代码片段.
因此,这个包的目的是 缓解痛苦和中心 所有可重复使用 codemods 片段被切入到一个单一的地方,所有进一步的变化只应在这个repo中发生.
目标是作为npm软件包发布这个repo,这样我们的用户就可以简单地引入这些通用功能,并在其代码库中作曲.
实例
例如,当你想堕落一个道具时 isLoading 从消费者的代码库中,您可以在文件中引入一些辅助功能 transformer.ts 从 @atlaskit/codemod-utils数字 :
import {
createRemoveFuncFor,
createTransformer,
} from '@atlaskit/codemod-utils';
const removeIsLoading = createRemoveFuncFor(
'@atlaskit/fancycomponent',
'ComponentName',
'isLoading',
);
const transformer = createTransformer([removeIsLoading]);
export default transformer;
然后运行 transformer 例如:
npx jscodeshift -t transformer.ts --ignore-pattern node_modules --parser babel --extensions ts path/to/your/codebase
高级用途
如果您需要用一个以上的突变来对照您的代码库,并且想要在一次中应用全部突变,建议将其妥善地排列成一个单独的文件夹.
例如,如果需要三个单独的步骤:
- 删除
isLoading道具 - 重命名
isDefaultChecked改为defaultChecked - 添加新道具
title
然后您可以有一个文件夹名为 migrates 其中包含:
- 删除 - is Loading.ts
- 重新命名为 is- Default 已检查到默认
- 添加标题.ts
对于每个文件,你可以有一些代码,比如:
import { createAddingPropFor } from '@atlaskit/codemod-utils';
export const addTitle = createAddingPropFor('@atlaskit/fancycomponent', {
prop: 'title',
defaultValue: '',
});
并在您的入境点 jscodeshift 你可以介绍所有移民:
import { addTitle } from './migrates/add-title';
import { removeIsLoading } from './migrates/remove-isLoading';
import { renameDefaultChecked } from './migrates/rename-isDefaultChecked-to-defaultChecked.ts';
import { createTransformer } from './utils';
const transformer = createTransformer([
renameDefaultChecked,
removeIsLoading,
addTitle,
]);
export default transformer;
这样,你就可以很容易地用所有可能的情景分别测试这些迁移情况,并自由地编成它们,看看它们是否能够一起工作,实现整个转变.