requirejs를 systemjs로 바꾸기 - 로컬 범위에 표시되지 않는 변수들

Question

requirejs 호출을 SystemJS으로 바꾸려고하는데, 내가 잘못하고있는 것이 정확히 무엇인지 확신 할 수 없습니다. 나는이 일을 제대로로드 얻기 위해 몇 가지 주요 /을 제거해야했습니다

return function(callback) { 
    console.log(callback.toString()) 
    SystemJS.import('app/shared.js').then(function(result){ 
     callbackFunction = callback; 
     callback(dashboard); 
     main(); 
    }); 
} 

:

return function(callback) { 
    requirejs(["/app/shared.js"], function(result){ 
     callbackFunction = callback; 
     callback(dashboard); 
     main(); 
    }) 
} 

그리고 내가 대신 노력하고있어입니다 :

우리의 원래 통화는 다음과 같이 괜찮아요,하지만 지금은 shared.js 상단에 정의 된 변수가 내 로컬 main.js 파일에 표시되지 않는 문제가 발생했습니다. 브라우저 콘솔에서 내가 얻을 :

Potentially unhandled rejection [1] ReferenceError: dashboard is not defined

shared.js가 dashboard 정의

• 이이 requirejs 통화를 대체하는 올바른 방법입니다 :

  var dashboard = { rows: [], } 
  // Other definitions... 
  
  define(["/app/custom-config.js", /* etc */]); 
  

  을 나는 두 가지 질문이 됐을까?

• 그렇다면 shared.js의 내 변수에 액세스 할 수없는 이유는 무엇입니까? 풀러 그림에 대한

는 main() 그냥 dashboard 객체를 설정 한 다음에 callbackFunction(dashboard)를 호출합니다.

Answer 1

두 개의 AMD 모듈이 있으며 글로벌 공간으로 누출되는 문제와 첫 번째 누설 된 것을 사용하려고 시도하는 두 번째 문제로 문제를 줄일 수 있습니다. 다음 두 모듈과 같습니다. 글로벌 공간으로

define(["./b"], function() { 
    console.log("a loaded"); 
    callback(); 
}); 

src/b.js 누출 :

RequireJS와

// This leaks `callback` into the global space. 
var callback = function() { 
    console.log("callback called"); 
} 
define(["./b"], function() { 
    console.log("b loaded"); 
}); 

, 위의 코드를 작동

src/a.js

는 누수 무엇 해당 모듈 누출에 의존하는 모듈이 필요합니다. 아, 은으로 잘못 설계되었으므로 b.js이 글로벌 공간으로 누설되어서는 안되기 때문에 작동합니다. 콘솔에 callback called이 표시됩니다.

SystemJS를 사용하면 위 코드가 작동하지 않습니다. 왜? RequireJS는 script 요소를 헤더에 추가하여 모듈을로드하고 callback이 script 요소를 작성한 경우와 완전히 동일한 방식으로 전체 공간에서 callback 요소가 모듈 코드를 실행하게합니다. src 특성이 스크립트. ("익명으로 정의되지 않은"정의 오류가 발생합니다.) SystemJS는 기본적으로 script 요소를 만들지 않고 eval을 사용하므로 코드 평가 방법이 변경됩니다. 일반적으로 중요하지 않지만 때로는 중요합니다. 여기에있는 경우에 callback이 글로벌 공간에 있지 않고 모듈 a이 실패합니다.

궁극적으로 AMD 모듈은 전역 공간을 사용하여 서로 정보를 전달하지 않도록 작성해야합니다.

그러나 최종 솔루션을 향한 디딤돌로서 유용 할 수있는 또 다른 솔루션이 있습니다. scriptLoad: true을 사용하여 SystemJS에 RequirejS와 같은 script 요소를 사용하도록 지시 할 수 있습니다. (자세한 내용 및주의 사항에 대한 meta에 대한 설명서를 참조하십시오.) 여기에 수행하는 구성입니다 : 내가 scriptLoad: true없이 여기에 준 예제 코드를 실행하면

System.config({ 
    baseURL: "src", 
    meta: { 
     "*": { 
      scriptLoad: true, // This is what fixes the issue. 
     } 
    }, 
    packages: { 
     // Yes, this empty package does something. It makes `.js` the 
     // default extension for modules. 
     "": {} 
    }, 
}); 

// We have to put `define` in the global space to 
// so that our modules can find it.  
window.define = System.amdDefine; 

은 다음 콜백을 호출 할 수 없습니다 a을 모듈. scriptLoad: true, 그것은 콜백을 호출 할 수 있습니다 나는 콘솔에 얻을 :

b loaded 
a loaded 
callback called