如何为 React Native 生成​​文档？

Question

我使用npm i -g 测试了 Doxygen 和多个 GitHub 项目（jsdoc、react-docgen、react-doc-generator，例如：

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

但是没有人真正了解 React Native 的最新 ES6 JavaScript 和 JSX（甚至不说原生代码）。我最终得到了无用的文档。

当然，我尝试添加 cmets（和 \fn 用于 doxygen），但 cmets 完全是手动输入的（未生成），有时文档中的代码不存在。

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

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

所以我求助于 React Native 文档专家来问：您如何为 React Native 生成​​文档？

如果仅来自 cmets，是否有工具可以从 RN+ES6(+Native) 代码生成 cmets？

奖励点：例如，我们可以从导入语句中自动获取图表吗？喜欢：

Answer 1

ESDoc 可以理解和记录 ES6 JavaScript 和 JSX for React Native。它将记录有或没有 docblock cmets 的代码。我将它与ESDoc JSX Plugin 一起使用。正如其他人在 cmets 中提到的那样，甚至还有支持最新 ECMAScript 提案的插件。

有关您将获得什么的示例，您可以查看redux-higher-order-reducers ES6 code documented using ESDoc。

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

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

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

加分项：我们可以从导入语句中自动获取图表吗 比如？

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

./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 导入图将包含在您的文档中。