Babel自动生成“Attribute”文档更轻松

## 前言

在组件库文档中，组件属性的介绍是必不可少的，但是如果组件属性比较多的话，手写Markdown文档就比较麻烦了。为了解决这个问题，我们可以使用Babel插件来自动解析源码属性上的注释，并生成对应的Markdown文档。

## 实现

### 1. 安装Babel插件

首先，我们需要安装Babel插件。可以使用以下命令：

npm install --save-dev @babel/plugin-transform-typescript

### 2. 创建Babel配置文件

然后，我们需要创建一个Babel配置文件。可以使用以下命令：

touch .babelrc

在`.babelrc`文件中，添加以下内容：

{
"plugins": ["@babel/plugin-transform-typescript"]
}

### 3. 编写Babel插件

接下来，我们需要编写Babel插件。可以使用以下命令创建插件文件：

touch babel-plugin-transform-attribute.js

在`babel-plugin-transform-attribute.js`文件中，添加以下内容：

module.exports = function (babel) {
const t = babel.types;

return {
visitor: {
TSInterfaceDeclaration(path) {
const node = path.node;
const id = node.id.name;
const properties = node.body.body;

    const markdown = [];
    markdown.push(`## ${id}`);
    markdown.push('');

    properties.forEach(property => {
      const name = property.key.name;
      const type = property.typeAnnotation.typeAnnotation;

      let description = '';
      if (property.trailingComments) {
        description = property.trailingComments[0].value;
      }

      markdown.push(`### ${name}`);
      markdown.push('');
      markdown.push(`- **类型：**  ${type.name}`);
      markdown.push(`- ****  ${description}`);
      markdown.push('');
    });

    const output = markdown.join('\n');

    path.replaceWith(t.stringLiteral(output));
  }
}

};
};

### 4. 使用Babel插件

最后，我们需要使用Babel插件来解析源码属性上的注释，并生成对应的Markdown文档。可以使用以下命令：

babel src --plugins babel-plugin-transform-attribute --out-file docs/attributes.md

这样，我们就可以自动生成组件属性的Markdown文档了。

## 总结

通过使用Babel插件，我们可以轻松地将源码属性上的注释转换成Markdown文档。这可以帮助我们快速地创建组件库文档，并保持文档的及时更新。