Vueコンポーネントドキュメント生成ツールライブラリのメソッド

const コンパイラ = require('vue-template-compiler')
const 結果 = コンパイラー.parseComponent(vueStr, [オプション])

// parseComponentはテンプレート、スクリプト、スタイルコンテンツを返します。
エクスポートインターフェースSFCDescriptor {
  テンプレート: SFCBlock | 未定義;
  スクリプト: SFCBlock | 未定義;
  スタイル: SFCBlock[];
  カスタムブロック: SFCBlock[];
}

const コンパイラ = require('vue-template-compiler')
//vueStr .vue ファイルの内容 const vue =compiler.parseComponent(vueStr)

//HTML部分のASTを生成する 
テンプレートをcompiler.compile(vue.template.content, {
    空白を保持: false、
    comments: true // コメント情報を生成する})

const parse = require('@babel/parser');

//js 部分の ast を生成
jsAst = parse.parse(vue.script.content, { とします。
    どこでもインポートエクスポートを許可: true 
})

traverse は '@babel/traverse' を必要とします。
トラバース.default(jsAst, {
  enter(path){ // 開始},
  //カスタムノードをサポートします。たとえば、ノードタイプが ExportDefaultDeclaration の場合は、このメソッドを削除します。ExportDefaultDeclaration(){

  }
})

コンポーネント情報 = {}
トラバース.default(jsAst, {
  エクスポートデフォルト宣言(パス){
    path.node.declaration.properties.forEach(item => {
        スイッチ (アイテム.キー.名前) {
            ケース 'props':
                componentInfo.props = extractProps(item) // プロパティを抽出
                壊す;
            ケース「メソッド」:
                componentInfo.methods = extractMethods(item) // メソッドを抽出
                壊す
            ケース '名前':
                componentInfo.name = item.value.value // コンポーネント名を取得
            ケース 'モデル':
                componentInfo.model = extractModel(item) // モデルを抽出
                壊す
            デフォルト：
                壊す;
        }
    });
  }
})

/** 
 *複数行のメモ* ドキュメント情報をアップロードするために使用*/
// 単一行コメント export default {
}
// コメント終了

// ExportDefaultDeclaration 次のコードを挿入します if (path.node.leadingComments) {
    コンポーネント情報.desc = path.node.leadingComments.map(item => {
        if (item.type === 'コメント行') {
            アイテム.値.トリム() を返す
        } それ以外 {
            item.value.split('\n').map(item => item.replace(/[\s\*]/g, '')).filter(Boolean) を返します。
        }
    }).toString()
}

/**
 * メソッドの説明 * @param {Bool} 型パラメータの説明 * @returns 戻り値の説明 */

{
    propA: Number, // 型のみ propB: [String, Number], // 型のみだが複数をサポート propC: { 
      タイプ: 文字列、
      必須: true
    },
    プロップD: {
      タイプ: 数値、
      デフォルト: 100 // デフォルト値付き},
    プロップE: {
      タイプ: オブジェクト、
      default () { // デフォルト値は関数が返す必要があります return { message: 'hello' }
      }
    },
    プロップF: {
      default: function () { // デフォルト値では、関数は上記のデフォルトとは異なる ast ノード型を返す必要があります return { message: 'hello' }
      }
      バリデータ: function (value) { // チェック return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
}

// Propsのデフォルト値を取得する function getDefaultVal (node) {
    type.isRegExpLiteral(node) || types.isBooleanLiteral(node) || types.isNumericLiteral(node) || types.isStringLiteral(node) の場合 {
        ノード値を返す
    } そうでない場合 (types.isFunctionExpression(node) || types.isArrowFunctionExpression(node) || types.isObjectMethod(node)) {
        試す {
            code = generate.default(types.isObjectMethod(node) ? node.body : node).code とします。
            fun = eval(**0,${types.isObjectMethod(node) ? 'function ()' : ''} $[code]**) とします。
            JSON.stringify(fun()) を返す
        } キャッチ（エラー）{
        }
    }
}

const extractEvents = (パス) => {
    // 最初の要素はイベント名です const eventName = path.parent.arguments[0]; 
    コメントを path.parentPath.parent.leadingComments とします。
    戻る {
        名前: イベント名.値、
        説明: コメント? comments.map(item => item.value.trim()).toString() : '——'
    }
}

メンバー式 (パス) {
    // イベントかどうかを判定する
    （path.node.property.name === '$emit'）の場合{
        イベントをextractEvents(パス)とします
        !componentInfo.events && (componentInfo.events = {});
        if (componentInfo.events[イベント名]) {
            componentInfo.events[イベント名].desc = event.desc ? event.desc : componentInfo.events[イベント名].desc
        } それ以外 {
            componentInfo.events[イベント名] = イベント
        }
    }
}

const traverserTemplateAst = (ast、ビジター = {}) => {
    関数 traverseArray (配列、親) {
        配列.forEach(子 => {
            トラバースノード(子、親);
        });
    }

    関数 traverseNode (ノード、親) {
        visitor.enter && visitor.enter(ノード、親);
        訪問者[node.tag] && 訪問者[node.tag](ノード、親);
        node.children をトラバース配列に追加します。
        visitor.exit && visitor.exit(ノード、親);
    }

    トラバースノード(ast、null);
}

トラバーサーテンプレートAst(template.ast, {
    スロット (ノード、親) {
        !componentInfo.slots && (componentInfo.slots = {})
        // ノードの位置を取得します。let index = parent.children.findIndex(item => item === node)
        let desc = '説明なし'、name = '-';
        （インデックス＞0）の場合{
            タグ = 親.子[インデックス - 1]
            // isCommentはコメントかどうかを判定します。if (tag.isComment) {
                desc = タグ.テキスト.トリム()
            }
        }
        if (node.slotName) name = node.attrsMap.name
        コンポーネント情報.スロット[名前] = {
            名前、
            説明
        }
    }
})