create-react-app/webpack의 기본 문제가 다시 적용됩니다.

Question

create-react-app을 사용하여 하나의 작동하는 반응 앱을 만들었지 만 나는 반응이 상대적으로 새로운 사람입니다.

반응의 판매 포인트 중 하나는 코드 전체를 한꺼번에 마이그레이션 할 수있는 것 같습니다. 현재 기존 웹 앱을 이전 중이며 최소한의 수정만으로 작성 - 반응 - 앱 생태계 내에서 작동하도록 할 수 있는지 확인하려고합니다. 2 단계는 반응 단계입니다. 나는 1 단계에 붙어 (내가 단계 관리가 생각이 그 오랜 시간이 걸렸습니다 모든-있지만 컴파일 0-받고.)

내가 내 자신의 index.html으로 create-react-appindex.html를 교체 한하고, create-react-appindex.js하고 내 메인 js 파일과 함께 index.js으로 이름이 변경되었습니다. 과거에는 주 파일에 태그 (index.html)가로드되었으며 모든 기능이 전역 범위에 포함되었습니다. 분명히 지금은 글로벌 범위에 들어 가지 않습니다. index.html에서

, 나는이 : index.js에서

<button type="button" id="connectButton" class="btn btn-success" onclick="connect()"> 
    Log on 
</button> 

, 나는이 :

function connect() { 
    ... 
} 

함수를 호출 할 버튼을 클릭 과거에는 글로벌 범위에 있었기 때문에. 이제 버튼을 클릭하면 "ReferenceError: connect is not defined"이 생성됩니다. 왜냐하면 분명히 글로벌 범위에 포함되지 않기 때문입니다.

누군가가이 질문에 대한 내 원래 버전을 어둡게 보았습니다. 아마도 "일을하는 반응 방식"이 아니기 때문일 수 있습니다. 나는 그 사실을 완전히 인식하고 있지만, 사람들이 "반응 방식"으로 행동하게하는 방법은 코드베이스를 점진적으로 마이그레이션 할 수있는 방법을 보여주는 것입니다. 그래서 나는이 문제가있는 유일한 사람이라고 상상할 수 없습니다. 인터넷 검색에서 내 시도는 도움이되는 것으로 생각되지 않았습니다.

부록 : 함수 정의 뒤에 window.connect = connect;을 삽입하여이 문제를 해결할 수 있음을 알았습니다.이 정의는 전역 범위에 넣습니다. 나는 이것을이 질문에 대한 답으로 추가 하겠지만, 누군가는 더 나은 설명이나 해결 방법을 가지고있을 것입니다. 그 경우에 나는 그들의 대답을 받아 들일 것입니다. 고맙습니다.

Answer 1

수정 된 질문에 언급했듯이 window.connect = connect;을 함수 정의 뒤에 삽입하면 전역 범위에 넣을 수 있으므로 효과적인 해결 방법 인 것 같습니다.