Question

如何创建一个包含Angular 2模块的javascript文件，该模块可供其他应用程序使用，但是在运行时直接从集中式服务器加载并且不捆绑到特定应用程序的代码中？

将此视为Angular 2库的CDN。要求是该库的消费者将在其页面上包含一个脚本。

这是以这种方式实现它的要求，所以我对任何建议将库捆绑到单个应用程序的输出文件中的答案不感兴趣。必须在运行时直接从库的服务器加载库脚本。

集中式网络应用程序名为CustomAuth
CustomAuth有一个名为CustomAuthModule
CustomAuthModule公开了可由外部Angular 2应用程序使用的多个服务和组件。

这是所需的工作流程（从高级别开始）。

开发人员希望在名为BookLibrary的Angular2应用程序中使用CustomAuth。
在开发人员的索引页面上，他们添加了一个指向http://server-url/CustomAuth/script的脚本包含。不应要求消费者了解有关systemjs或webpack等模块加载器的任何信息。
在他们的angular2代码中，他们从CustomAuth模块（服务，组件等）导入内容。
当他们使用angular-cli编译应用程序时，它将不包含CustomAuth代码，而是假设它将在运行时动态加载。

我已经做了很多关于此的研究，我没有运气搞清楚。任何帮助将不胜感激。

Answer 1

您可以使用ES6 + Angular2 + Webpack来实现此目的。

在进入之前，让我解释一下什么是umd模块系统。

UMD模式通常试图提供兼容性当今最流行的脚本加载器（例如RequireJS等）

如上所述，UMD是一种模式，使用此模式创建的库将支持所有模块/脚本加载器，如requirejs，webpack，browserify，{ {1}}等等。遵循UMD模式的库将被所有主要模块系统（systemjs，AMD，CommonJS和ES6）识别。

这是CDN中所有库的工作方式。

现在，即使您必须遵循相同的Vanilla JS模式。由于您的图书馆位于UMD，我建议您使用angular2，ES6和Angular2。

您必须设置这些配置以获取UMD格式的库，以便任何脚本加载器都可以使用它。

Webpack

一旦你的webpack输出包准备就绪（umd模块），那么任何用户都可以将你的库注入索引页面并开始使用你的angular2组件，而不管他们使用的脚本加载器/模块系统。

有一个很好的例子here，他解释了这个here

问：我们图书馆的消费者如何在Angular 2应用程序中包含此umd软件包？

Ans：由于您的库将成为UMD模块，因此用户可以根据他们在应用程序中使用的脚本加载器/模块系统来包含库。

例如。香草JS：

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
  },

RequireJS（AMD）：

    <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>

SystemJS（CommonJS）：

    <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>

然后您可以照常导入您的图书馆。

的WebPack：

在Index.html中

在webpack.config.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);

您的图书馆将在全球范围内以{ externals: { // require("your_lib") is external and available // on the global var Your_Lib "your_lib": "Your_Lib" } }的形式提供。

如何创建所有脚本加载器

1 个答案: