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