Как создать библиотеку angular2, которая может поддерживаться всеми загрузчиками сценариев

Question

Как создать файл javascript, содержащий модуль Angular 2, который может использоваться другими приложениями, но загружается во время выполнения непосредственно с централизованного сервера и НЕ является в комплекте с кодом конкретного приложения?

Подумайте об этом как о CDN для библиотеки Angular 2. Требование состоит в том, чтобы потребители этой библиотеки включали в себя один скрипт на своей странице.

Это требование реализовать его таким образом, поэтому мне не нужны никакие ответы, которые предполагают объединение библиотеки в выходные файлы отдельного приложения. Сценарий библиотеки должен быть загружен непосредственно с сервера библиотеки во время выполнения.

• Централизованная веб-приложение называется CustomAuth
• CustomAuth имеет единственный модуль Угловые 2 под названием CustomAuthModule
• CustomAuthModule обнажает несколько служб и компоненты, которые могут быть использованы внешними Угловыми 2 приложениями.

Вот желаемый рабочий процесс (с высокого уровня).

• Разработчик хочет использовать CustomAuth в своем приложении Angular2 под названием BookLibrary.
• На странице индекса разработчика добавлен скрипт, который указывает на http://server-url/CustomAuth/script. Потребителю не нужно знать ничего о загрузчиках модулей, таких как systemjs или webpack.
• В своем коде с угловым кодом они импортируют материал из модуля CustomAuth (сервисы, компоненты и т. Д.).
• Когда они скомпилируют свое приложение с использованием углового cli, он не будет включать код CustomAuth, но вместо этого предположит, что он будет загружен «на лету» во время выполнения.

Я проделал много исследований по этому вопросу, и мне не удастся это выяснить. Любая помощь будет принята с благодарностью.

Answer 1

Вы можете достичь этого с помощью ES6 + Angular2 + Webpack.

Прежде чем вдаваться в это, позвольте мне объяснить, что такое модульная система umd.

Узор UMD обычно пытается предложить совместимость с самых популярных скриптовых загрузчиков дня (например, RequireJS среди других)

Как указано выше, UMD является образцом, где библиотеки создан с шаблон будет поддерживать все загрузчики модулей/сценариев, такие как requirejs, webpack, browserify, systemjs и т. д. Т.е. библиотеки, которые следуют шаблону UMD, будут распознаваться всеми основными модульными системами (, CommonJS, ES6 и Vanilla JS).

Так работает все библиотеки CDN.

Теперь вы должны следовать одному и тому же рисунку i.e 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

Q: Как бы потребитель нашей библиотеки включить этот UMD сверток в их угловом 2 приложении?

Ans: Так как ваша библиотека будет модуль UMD, пользователь может включать в себя библиотеку, основанную на системе скрипт загрузчика/модуля они используют с их применением.

Например. Vanilla 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 в глобальном масштабе.