webpack 번들 코드를 시작하려면 onLoad를 사용해야합니까?

Question

우리는 dev에서 볼 수없는 몇 가지 이상한 것을 프로덕션에서 보았습니다.

우리는 웹팩에 "외부"입니다 몇 가지 모듈이,

1. 우리의 로케일 번역 문자열
   는
2. 자체 반응 (별도 선택된 로케일에 따라로드 된)
3. 또 다른 커플 (cdnjs에서로드) of externals (cdnjs에서로드)

우리가보고있는 오류 (Sentry를 통해)는 resourceBundle을 찾을 수 없거나 React를 찾을 수 없다는 오류입니다.

우리가 진입 점 파일에서 코드를 시작하기 전에 onLoad 이벤트를 기다리지 않아서 발생할 수 있는지 궁금합니다. 나는 webpack이 onLoad를 다루고 있다고 가정하고 있었지만, (웹팩 출력 파일을 검색 한 후에) 그럴 수는 없다. 어떤 경우 든 내 코드를 iffe에 래핑하여 모든 외부 요소가 존재할 때까지 기다릴 필요가 있습니다.

그런 다음 ES6 오는 import 문 및 나는

나는 브라우저가 변경되지 않았습니다 알고 ..... 나는 수입은 최상위 수준에 있어야 년부터 iffe에 해당 코드를 래핑하는 관리하는 방법 궁금하네요 그 onLoad 여전히 중요하지만, 내가 간과 한 미묘한 방법으로 이것을 다루는 webpack이거나, 내가 들어 와서 코드에 추가해야 할 필요가 있는가? 그리고 그것을 추가해야한다면, 어떻게 es6 import를 처리 할 수 ​​있습니까?

Answer 1

예, webpack은 코드가 실행될 때까지 기다리지 않습니다. 코드가로드되는 즉시 실행됩니다. 이것은 유연성을위한 좋은 일이지만 핸들러를 직접 추가해야한다는 것을 의미합니다 (NBD).

당신이 (my Frontend Masters course on Webpack에 사용)을 es6-todomvc 프로젝트의 FEM/01.4-transpile 분기에 the bootstrap.js file 보면, 당신은 내가 window에 load 이벤트 리스너를 추가하는 $on 도우미를 사용하고 있음을 알 수 있습니다. 앱로드가 완료되면 앱을 시작하는 책임이있는 하나의 (작은) 파일을 갖는 것이 좋은 접근 방법입니다.

가 여기에 또 다른 예입니다 : 당신이 jQuery를하는 경우

function ready(fn) { 
    if (document.readyState != 'loading'){ 
    fn(); 
    } else { 
    document.addEventListener('DOMContentLoaded', fn); 
    } 
} 

ready(function() { 
    // start up your app 
}) 

, 당신은 ready 기능을 필요로하지 않고 간단하게 할 수있는 : ESModules에 관해서는

$(function() { 
    // start up your app 
}) 

을 파일의 상단에, 필자의 주요 팁은 모듈을 가져올 때 아무 것도하지 말아야한다는 일반적인 원칙입니다. 아마도 변수를 설정해도되지만, 함수를 내 보내야합니다. 이렇게하면 상황을 쉽게 테스트하고 사용할 수 있으므로 다음과 같이 할 수 있습니다.

행운을 빈다.