web-dev-qa-db-ja.com

React Nativeのドキュメントを生成する方法は？

私は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

しかし、Reactネイティブ）の最近のES6 JavaScriptとJSXを実際に理解している人はいません（ネイティブコードについても触れていません）。

もちろん、コメント（およびdoxygenの場合は\ fn）を追加しようとしましたが、コメントは完全に手動で入力され（生成されません）、ドキュメントのコードが存在しない場合があります。

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

最後に、フォルダとサブフォルダをjsdocする方法が見つかりませんでした（ただし、コメントファイルのテスト結果は劣っていました）。

React Native documentation gurus to ask：どのようにしてReact Native？

コメントのみからのものである場合、RN + ES6（+ Native）コードからコメントを生成するツールはありますか？

ボーナスポイント：たとえば、インポートステートメントから図を自動的に取得できますか？お気に入り： - app-diagram

javascriptreact-nativenativediagramdocumentation-generation
24
user8036224

ESDoc は、React NativeのES6 JavaScriptとJSXを理解して文書化できます。docblockコメントの有無にかかわらず、コードを文書化します。 ESDoc JSX Plugin 。他の人がコメントで述べたように、最新の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}}
  ]
}

ボーナスポイント：たとえば、インポートステートメントから図を自動的に取得できますか？

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インポート図がドキュメントに含まれます。

2
Todd Chaffee