javascript - 如何为React Native生成文档？

我使用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(甚至不谈论本地代码)。我最终得到了无用的文档。

当然，我尝试添加注释(对于doxygen，添加\fn)，但是注释是完全手动输入的(未生成)，有时文档中没有代码。

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

最终，我没有找到如何对文件夹和子文件夹进行jsdoc(但是对带注释的文件的测试结果还是很差的)。

因此，我转向React Native文档专家问:您如何为React Native生成文档？

如果仅来自注释，那么您是否具有从RN + ES6(+ Native)代码生成注释的工具？

优点:例如，我们可以自动从导入语句获取图吗？喜欢:

最佳答案

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

有关获得的示例，请查看redux-higher-order-reducers ES6 code documented using ESDoc。



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

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

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