就像我们在 babelTypes 中一样，将 JavaScript 代码转换为 AST 表示

Posted 2023-02-19

【中文标题】就像我们在 babelTypes 中一样，将 JavaScript 代码转换为 AST 表示

【英文标题】：Javascript code to AST representation as we do in babelTypes

【发布时间】：2021-09-10 14:37:16

【问题描述】：

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

这只是一个导入语句。例如。 ，如果我想生成一个完整的组件，我必须编写一个冗长的代码，在一个文件中太长并且耗时。我们有什么捷径可以通过一些递归或库或任何工具来做到这一点吗？

【参考方案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`";
`;

【讨论】：

如果我想要一个大字符串怎么办，假设一个完整的组件传入模板。 ast?

@TheRakeshPurohit 这不是我通常希望注入的东西，但您插入的内容完全取决于您。如果我这样做，我可能会在一些普通的 JS 帮助文件中编写所有组件代码，然后如果您想要注入，则将导入注入该帮助文件并调用帮助函数来创建组件。

我们可以用这个答案来做到这一点。谢谢。

【参考方案2】：

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

import babelGenerate from '@babel/generator';

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

【讨论】：

我觉得 Loganfsmyth 的回答很灵活。