모든 스크립트 로더에서 지원할 수있는 angular2 라이브러리를 만드는 방법

Question

다른 응용 프로그램에서 사용할 수 있지만 런타임시 중앙 집중식 서버에서 직접로드되는 Angular 2 모듈이 포함 된 javascript 파일을 만들려면 어떻게해야합니까? 특정 응용 프로그램의 코드에 번들로 제공됩니까?

Angular 2 라이브러리의 CDN이라고 생각하십시오. 요구 사항은이 라이브러리의 소비자가 자신의 페이지에 단일 스크립트를 포함한다는 것입니다.

이 방법으로 구현하는 것이 요구되므로 개별 응용 프로그램의 출력 파일에 라이브러리를 묶는 것이 좋습니다. 라이브러리 스크립트는 런타임에 라이브러리 서버에서 직접로드해야합니다.

• 중앙 집중식 웹 응용 프로그램은
• CustomAuth이 CustomAuthModule 여러 서비스 및 외부 각도 2 응용 프로그램에서 사용할 수있는 구성 요소를 노출 CustomAuthModule
• 라는 단일 각도 2 모듈이 CustomAuth이라고합니다.

다음은 원하는 워크 플로입니다 (상위 수준).

• 개발자가 BookLibrary라는 Angular2 응용 프로그램에서 CustomAuth를 사용하려고합니다.
• 개발자 색인 페이지에서 http://server-url/CustomAuth/script을 가리키는 스크립트 include를 추가합니다. 소비자는 systemjs 또는 webpack과 같은 모듈 로더에 대해 알 필요가 없어야합니다.
• angular2 코드에서 CustomAuth 모듈 (서비스, 구성 요소 등)에서 항목을 가져옵니다.
• 각도 -Cli을 사용하여 응용 프로그램을 컴파일하면 CustomAuth 코드가 포함되지 않지만 대신 런타임에 즉시로드 될 것이라고 가정합니다.

나는 이것에 대해 많은 연구를 해왔고, 그걸 알아내는 행운이 없다. 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

ES6 + Angular2 + Webpack으로이를 수행 할 수 있습니다.

들어가기 전에 umd 모듈 시스템이 무엇인지 설명하겠습니다.

는

UMD 패턴은 일반적으로 UMD는 도서관이 만든 패턴, 오늘의 가장 인기있는 스크립트 로더와의 호환성 (예를 들어 다른 사람의 사이에 RequireJS) 위의 인용

을 제공하기 위해 시도 패턴은 requirejs, webpack, browserify, systemjs 등과 같은 모든 모듈/스크립트 로더를 지원합니다. 즉, UMD 패턴을 따르는 라이브러리는 모든 주요 모듈 시스템 (AMD, CommonJS,)에 의해 인식됩니다.3210 및 Vanilla JS).

이것은 CDN의 모든 라이브러리가 작동하는 방식입니다.

지금도 동일한 패턴, 즉 UMD 패턴을 따라야합니다. 귀하의 도서관이 angular2에 있으니 ES6, Angular2 및 Webpack으로 가보길 권합니다.

모든 스크립트 로더에서 사용할 수 있도록 라이브러리를 UMD 형식으로 가져 오려면 이러한 구성을 설정해야합니다. 당신의 웹팩 출력 번들 (UMD 모듈) 준비되면

output: { 
    path: __dirname + '/lib', // path to output 
    filename: outputFile, // library file name 
    library: libraryName, // library name 
    libraryTarget: 'umd', // the umd format 
    umdNamedDefine: true // setting this to true will name the AMD module 
    }, 

후 모든 사용자가 인덱스 페이지에 라이브러리를 주입 및 스크립트 로더/그들이 사용하는 모듈 시스템의 관계없이 angular2 구성 요소를 사용하여 시작할 수 있습니다.

멋진 예를 here가있다 그는이 here

Q 설명 : 어떻게 우리 도서관의 소비자가 자신의 코너 2 응용 프로그램에서이 UMD 번들을 포함 할 것이다?

Ans By의 : 라이브러리는 UMD 모듈 될 것입니다 때문에, 사용자들이 자신의 응용 프로그램과 함께 사용하는 스크립트 로더/모듈 시스템을 기반으로 라이브러리를 포함 할 수.

예를 들면. 바닐라 JS :

<script src="http://example.com/your_lib.js"></script> 
    <script> 
     // Your_Lib will be available and will attach itself 
     // to the global scope. 
     var html = Your_Lib.render(); 
    </script> 

RequireJS (AMD) :

<script src="http://example.com/require.js"></script> 
    <script> requirejs config goes here </script> 
    <script> 
     define(['your_lib', function(Your_Lib) { 
      var html = Your_Lib.render(); 
     }]) 
    </script> 

SystemJS (CommonJS) :

var map = { 
      '@angular': 'node_modules/@angular', 
      .... 
      'your_lib': 'example.com/your_lib.js' 
     }; 
     var config = { 
      defaultJSExtensions: true, 
      map: map, 
      packages: packages 
     }; 
     System.config(config); 

는 그런 다음 평소와 같이 라이브러리를 가져올 수 있습니다.

웹팩 : Index.html을

에서

에서 webpack.config.js

{ 
    externals: { 
     // require("your_lib") is external and available 
     // on the global var Your_Lib 
     "your_lib": "Your_Lib" 
    } 
} 

그리고 당신의 라이브러리는 전역 범위에서 Your_Lib으로 제공 될 것이다.