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

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

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

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

Как указано выше, UMD — это шаблон, в котором библиотеки, созданные с помощью этого шаблона, будут поддерживать все загрузчики модулей/скриптов, такие как requirejs, webpack, 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 независимо от используемых систем загрузчиков скриптов/модулей.

Есть хороший пример здесь, и он объяснил это здесь

В: Как потребитель нашей библиотеки может включить этот пакет umd в свое приложение Angular 2?

Ответ: Поскольку ваша библиотека будет модулем 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>

Требуется JS (АМД):

    <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 (Общий JS):

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 в глобальной области видимости.