Skip to content

Javascript code to AST representation as we do in babelTypes

Every time I want to modify, I have to write t.importDeclaration([t.importDefaultSpecifier(t.identifier(`${importcomponentName}`))], t.stringLiteral(`../components/${importcomponentName}`))

It is just for an import statement. Eg. , if I want to generate a whole component, I have to write a lengthy code that is too long in a file and time-consuming. Do we have any short way to do this by some recursion or library or any tool?

Answer

Babel provides @babel/template for this type of thing so you could replace

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

with

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