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

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

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Как указано выше, umd - это шаблон, в котором библиотеки, созданные с помощью этого шаблона, будут поддерживать все модули /script загрузчики, такие как requirejs, Webpack, browserify, systemjs и т.д. библиотеки, которые следовали шаблону UMD, были бы распознаны всеми основными модульными системами (AMD, CommonJS, ES6 и Vanilla JS).

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

Теперь даже вам нужно следовать тому же шаблону i.e umd. Поскольку ваша библиотека находится на Angular2, я предлагаю вам пойти с ES6, Angular2 и Webpack.

Вы должны установить эти конфиги для получения библиотеки в формате UMD, чтобы ее могли использовать любые загрузчики script.

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 независимо от используемых ими систем загрузчиков/модулей script.

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

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

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

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