여러 파일을 사용할 때 전역 네임 스페이스에서 기능을 유지하려면 어떻게해야합니까?

Question

JS로 대규모 어플리케이션을 만들었습니다. require.js를 사용했습니다. 이것은 훌륭합니다. 그러나 파일을 비동기 적으로로드하고 싶지 않은 경우 상당한 오버 헤드가 될 수 있습니다. 그것.

이번에는 순수한 JS로 작성하고 Grunt로 모든 것을 연결하고 축소합니다. (여기에서는 Grunt n00b입니다.) 모든 함수를 별도의 파일로 유지하기 때문에 단일 파일을 사용하는 경우 모든 것을 닫을 수 없습니다. 글로벌 네임 스페이스에서 모든 기능을 유지하는 최상의 솔루션은 무엇입니까?

전체 종속성 관리 솔루션이 필요한지 확실하지 않지만 가볍고 단순한 솔루션이라면 고려해 볼 수 있습니다.

Answer 1

CommonJS (require.js에 의해 사용되는 사양) 또는 포함한 ES2015 module specification를 구현 중 하나에 의해 일반 및 응용 프로그램 전체 종속성을 관리하기위한 자바 스크립트 도구를 사용하기 쉬운의 수 (벤자민 제안) Webpack, Browserify있다, 및 Rollup.

Answer 2

어떤 의존성 관리 도구없이하고 싶은 경우에 당신은 예를 들어 Revealing Module Pattern 및 네임 스페이스, 단순화 된 예제를 사용할 수 있습니다

최고/응용 프로그램 파일

window.SomeApplication = (function() { 
    // Add functions you want to expose to this 
    this.require= function (path) { // Creates namespace if not already existing, otherwise returns reference to lowest level object in path 
     var current = window, 
       i; 

     path = path.split('.'); 
     for (i = 0; i < path.length; ++i) { 
      if (!current[path[i]]) { 
       current[path[i]] = {}; 
      } 
      current = current[path[i]]; 
     } 

     return current; 
    }; 

    return this; 
})(); 

일부 다른 파일

SomeApplication.require('SomeApplication.SomeSubNamespace').SomeModule = (function() { 
    // Module code 

    return this; 
})(); 

그런 다음 concat을 지정하고 맨 위의 파일을 먼저 지정하십시오. 이렇게하면 창 객체에 하나의 항목 만 표시되고 모듈은 window.SomeApplication.SomeSubNamespace.SomeModule을 통해 액세스 할 수 있습니다.