Javascript 代码到 AST 表示，就像我们在 babelTypes 中所做的那样

Question

每次要修改都要写t.importDeclaration([t.importDefaultSpecifier(t.identifier(`${importcomponentName}`))], t.stringLiteral(`../components/${importcomponentName}`))

它只是用于导入语句。例如。，如果我要生成一个完整的组件，我必须写一个冗长的代码，在一个文件中太长而且耗时。我们是否有任何通过递归或库或任何工具来完成此操作的捷径？

Answer 1

Babel 为这种类型的东西提供了 @babel/template 所以你可以替换

const decl = t.importDeclaration(
  [t.importDefaultSpecifier(t.identifier(`${importcomponentName}`))], 
  t.stringLiteral(`../components/${importcomponentName}`)
);

和

const decl = template.ast`
  import ${importcomponentName} from "${`../components/${importcomponentName}`}";
`;

Answer 2

Loganfsmyth 答案的替代方法，而不是使用 @babel/template，您可以使用 @babel/generator:

import babelGenerate from '@babel/generator';

const decl = babelGenerate(
  `import ${importcomponentName} from '${`../components/${importcomponentName}`}';`
);

Javascript 代码到 AST 表示，就像我们在 babelTypes 中所做的那样

Javascript code to AST representation as we do in babelTypes

javascript

reactjs

typescript

babeljs

abstract-syntax-tree