create-react-app를 꺼낸 후 코드를 다시 작성하는 Babel 플러그인을 사용합니다.

Question

create-react-app로 비어있는 앱을 생성하고 ejected 한 다음 내 코드를 다시 작성하는 Babel 플러그인을 추가했습니다. 최소 생식이 소요 플러그인 :

import React from 'react'; 
App(); 

과로 변환 :

import React from 'react'; 
export default() => <div />; 

당신이 astexplorer으로 테스트 할 수있는 코드는 다음과 같습니다 거의 작동

module.exports = function testPlugin(babel) { 
    return { 
    visitor: { 
     CallExpression(path) { 
     var t = babel.types; 
     var op = t.jSXOpeningElement(t.jSXIdentifier("div"), [], true); 
     var el = t.jSXElement(op, null, []); 
     var arrowFunctionExpression = t.arrowFunctionExpression([], el); 
     path.parentPath.replaceWith(t.exportDefaultDeclaration(arrowFunctionExpression)); 
     } 
    } 
    }; 
}; 

추출 된 생성 - 반응 - 응용 프로그램을 제외한 모든 상용구 (플러그인이 Babel 구성의 플러그인 섹션에 추가 된 경우). 그것과 함께 얻을 수 있습니다 :

./src/App.js 
Line 2: 'App' is not defined no-undef 

내가 console.log 수 있으며 그 안에 오류를 던질 수 있기 때문에 플러그인이 실행되고 있습니다.

무슨 일 이니?

Answer 1

무슨 일 이니?

이 오류는 ESLint에서 비롯된 것이며 ESLint는 코드 형식 지정 및 확인 도구이므로 원본 소스 코드에서 실행됩니다. 그것은 당신이 바벨 시대의 변화를 수행하기 위해 바벨 플러그인을 작성했다는 것을 알 수있는 방법이 없습니다. 알고있는 것만 큼 어디에도 선언되지 않은 코드에 App이라는 변수가 있습니다.

아마도 App이 .eslintrc 파일의 글로벌 문자라고 생각하면 no-undef 규칙에 정의 된대로 변수가 처리됩니다.