如何創建可以被所有腳本加載器支持的angular2庫

如何創建一個JavaScript文件，其中包含可由其他應用程序使用的Angular 2模塊，但在運行時直接從中央服務器加載並且不是捆綁到一個特定的應用程序的代碼？如何創建可以被所有腳本加載器支持的angular2庫

將此視爲Angular 2庫的CDN。要求是這個圖書館的消費者將在他們的頁面上包含一個腳本。

這是要求以這種方式實現它，所以我對任何建議將庫捆綁到單個應用程序的輸出文件中的答案都不感興趣。庫腳本必須在運行時直接從庫的服務器加載。

的集中式Web應用程序被稱爲CustomAuth
CustomAuth有一個角2模塊調用CustomAuthModule
CustomAuthModule暴露出一些服務，並可以通過外部角2個應用程序中使用的組件。

這是所需的工作流程（從高層次）。

開發人員希望在名爲BookLibrary的Angular2應用程序中使用CustomAuth。
在開發人員的索引頁上，他們添加了一個腳本，其中指向http://server-url/CustomAuth/script。消費者不應該被要求知道任何有關模塊加載器的信息，比如systemjs或者webpack。
在他們的angular2代碼中，他們從CustomAuth模塊（服務，組件等）導入東西。
當他們使用angular-cli編譯他們的應用程序時，它不會包含CustomAuth代碼，而是會假設它將在運行時被加載。

我在這方面做了大量的研究，而且我沒有任何計算它的運氣。任何幫助將不勝感激。

來源

2016-12-16 TwitchBronBron

我認爲你可以爲你的模塊創建polyfil js，就像在plunker例子中那樣我們包含角2 polyfil http://embed.plnkr.co/w2FVfKlWP72pzXIsfsCU/。這樣它將允許用戶導入js文件，用戶可以在index.html中導入並使用它的模塊。 –

您可以通過ES6 + Angular2 + Webpack實現此目的。

在進入之前，讓我解釋什麼是umd模塊系統。

的UMD圖案典型地試圖提供與天的最流行的腳本裝載機兼容性（例如除其他RequireJS）

正如上面引述的，UMD中存放庫與此形成的圖案模式將支持如requirejs,,browserify,systemjs等的所有模塊/腳本加載器，即遵循UMD模式的庫將被所有主要模塊系統識別（AMD,CommonJS,ES6和Vanilla JS）。

這就是CDN中所有庫工作的方式。

現在，即使你必須遵循相同的UMD模式。由於你的圖書館在angular2，我建議你去ES6,Angular2和Webpack。

您必須設置這些配置才能獲得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 
    },

一旦你的WebPack輸出束就緒（UMD模塊），則任何用戶都可以注入你的庫到索引頁面，即可開始使用angular2組件無論腳本裝載機/他們使用的模塊系統。

有一個很好的例子here和他解釋這here

問：我們圖書館的消費者如何將包括它們的角2應用此UMD捆綁？

答：由於您的圖書館將是一個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);

然後你可以導入你的圖書館照常。

的WebPack：

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。

來源

2017-01-19 06:43:47 Thaadikkaaran

我們的圖書館的用戶如何在他們的Angular 2應用程序中包含這個umd包？ – TwitchBronBron

@TwitchBronBron已更新答案 – Thaadikkaaran

@JaganathanBantheswaran尼斯。這將工作與角cli？ – Chris

如何創建可以被所有腳本加載器支持的angular2庫

回答

相關問題