基于jscodeshift+ast的项目重构实践

背景

业务需求：angular+vue2--->vue3+vite

angular作为外层框架，都是AMD的，打包工具是grunt，内层页面和组件都是vue.extend

示例

define([
  'lodash',
], function (_) {
  return Vue.extend({
    components: {
    },
    data() {
    },
    computed: {
    },
    template: `
     // 只能说这玩意看着很难受，vue2也没个jsx
    `,
    beforeMount() {
    },
    mounted() {
    },
    methods: {
    },
    beforeDestroy() {
    }
  });
});

理解

ast不难，这玩意就是繁琐，用起来一点不难，给我的感觉就像啥呢，一个bug你只能console不能debugger，一点点调，你的业务场景越复杂，也就相当于这bug更难调，哈哈哈

选型

• babel：写的繁琐
• recast：封装的babel
• jscodeshift：封装的recast

用啥就不用我说了吧

实战

第一步

npm install -g jscodeshift

第二步

-t：jscodeshift -t xxx.js oldFileA targetFileB 如果不加 -t xxx.js默认脚本文件就是transform.js

-d：jscodeshift -d target_file 测试结果

-p：jscodeshift -p target_file 结果打印在命令行里

第三步

配合着ast官网+nodejs的fs模块进行重构

jscodeshift官网+ast官网