0

일부 코드 메트릭을 제공하는 개발 도구를 개발 중입니다.바벨 플러그인 - 정적 코드 분석 후 출력으로 구조화 된 정보 얻기

나는 수입 값 당과 라이브러리는 소스 파일을 통해 이동하고 용도를 (#loc)을 계산하기위한 도구를하고 싶습니다.

e.e. 로다시에 대해서는 isEqual, cloneDeep의 용도를 알고 싶습니다. 나는 출력으로하고 싶은 : 내가 나를 보자 것을 알고 나는이 바벨 플러그인으로 구현을 시작

1 // aFile.js 
2 import {isEqual, cloneDeep} from 'lodash' 
3 // some code .. 
4 if (isEqual(variableA, variableB)) { 
5 // ^^^^^^^ 
6 } 
7 let myClonedObject = cloneDeep(myObject); 
8 //     ^^^^^^^^^ 

도구를 찾을 수 무엇을해야

+------------+------------+---------+ 
| Library | Imported | #LOC | 
+------------+------------+---------+ 
| Lodash  | isEqual |  20| 
| Lodash  | cloneDeep |  4| 
+------------+------------+---------+ 

예제 파일 쉽게

  • 이 읽을 수있는 형식의 코드를 파싱 (AST)
  • 방문 LL importDeclaration
  • 이 도구를 들어

현재 구현

export default function({ types: t }) { 
    return { 
    visitor: { 
     ImportDeclaration(path, state) { 
     if(path.get('source').node.value === 'lodash') { 
      path.get('specifiers').forEach(function(specifier) { 
      if(specifier.node.imported) { 
       const importedIdentifierName = specifier.node.imported.name; 
       if(importedIdentifierName === 'isEqual') { 
       const isEqualLoc = new Set(); 
       const {referencePaths} = path.scope.getBinding(importedIdentifierName); 
       referencePaths.forEach(function(referencePath) { 
        isEqualLOC.add(referencePath.node.loc.start.line); 
       }); 
       console.log(isEqualLOC.size); 
       } 
      } 
      }); 
     } 
     } 
    } 
    }; 
}; 

관련 참조

  • 풍습을 계산 얻을, 난 단지 코드에 작업을 읽습니까 (아무 변화 없다/생성).

    내 질문 : babel-cli 명령 또는 다른 API의 결과에 대해 babel 플러그인 (lib/import/# loc)에서 생산 된 정보를 어떻게 공유 할 수 있습니까?

    console.log으로 결과를 (특정 ID로) 기록하려고 생각했지만 해결 방법이 마음에들 것 같습니다. babel 플러그인에서 정보를 노출하는 데 명확한 API가 있는지 궁금합니다.

  • 답변

    1

    이것은 바벨의 유틸리티를 사용하여 작성하는 것이 더 좋을지 모르지만 자신의 기반 위에 구현되었습니다. 현재 Babel은 통계 등을 출력하는 방법을 제공하지 않습니다. 예를 들어 플러그인을 다음과 같이 스크립트로 변경할 수 있습니다.

    const fs = require('fs'); 
    const babylon = require('bablylon'); 
    const traverse = require('babel-traverse'); 
    
    const data = fs.readFileSync('./thing.js'); 
    traverse(babylon.parse(data), { 
        ImportDeclaration(path) { 
        // ... 
        }, 
    }); 
    
    // Do whatever output you want here 
    
    +0

    감사합니다. 그건 @thejameskyle에서 얻은 피드백이기도합니다. 최대한 빨리 시도하고 이에 따라이 답변을 업데이트하겠습니다. –