如何为React Native生成文档？

Question

我测试了Doxygen和多个GitHub项目(jsdoc,react-docgen,react-doc-generator使用npm i -g如下:

react-doc-generator ./ -o DOCUMENTATION.md
react-docgen --pretty -o out/reactdocgen.html ./
jsdoc ./src
doxywizard

但没有人真正理解最近的ES6 JavaScript和JSX for React Native(甚至没有提到本机代码).我最终得到了无用的文档.

当然,我试图添加注释(和don的\ fn),但是注释完全由手工输入(未生成),有时文档中的代码不存在.

/**
 * 
 * 
 * @class MainScreen
 * @extends {Component}
 */
class MainScreen extends Component {
    /**
     * 
     * \fn navigationOptions()
     * @static
     * @memberof MainScreen
     */

最后我没有找到jsdoc文件夹和子文件夹的方法(但是评论文件的测试结果是subpar).

所以我转向React Native文档大师问:如何为React Native生成文档？

如果仅来自评论,您是否有工具从RN + ES6(+ Native)代码生成注释？

加分点:例如,我们可以自动从导入语句中获取图表吗？喜欢:

Answer 1

ESDoc可以理解和记录 React Native 的 ES6 JavaScript 和 JSX。它将记录带或不带文档块注释的代码。我将它与ESDoc JSX 插件一起使用。正如其他人在评论中提到的，甚至还有支持最新 ECMAScript 提案的插件。

有关您将获得的示例，您可以查看使用 ESDoc 记录的 redux-higher-order-reducers ES6 代码。

最后，我没有找到如何对文件夹和子文件夹进行 jsdoc（但对注释文件的测试结果低于标准）。

您可以指定在配置文件中记录哪个文件夹.esdoc.json。这是一个仅在“src”文件夹中记录代码的示例

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {"name": "esdoc-standard-plugin"},
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

加分点：例如，我们可以从 import 语句中自动获取图表吗？

ESDoc 不会直接执行此操作，但使用 ESDoc 的“手动”功能很容易实现它，该功能允许您包含自己的文档。首先使用madge之类的工具从 import 语句生成图表。例如：

./node_modules/.bin/madge --image manual/asset/graph.svg src/

manual/imports-diagram.md接下来创建一个包含以下内容的文件：

# Diagram of imports
![Diagram of imports](asset/graph.svg)

最后，更改 ESDoc 配置以指定用户手册部分：

{
  "source": "./src",
  "destination": "./docs",
  "plugins": [
    {
      "name": "esdoc-standard-plugin",
      "option": {
        "manual": {
          "asset": "./manual/asset",
          "files": [
            "./manual/imports-diagram.md"
          ]
        }
      }
    },
    {"name": "esdoc-jsx-plugin", "option": {"enable": true}}
  ]
}

再次运行esdoc，madge 导入图将包含在您的文档中。