11

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

将其视为 Angular 2 库的 CDN。要求是这个库的使用者将在他们的页面上包含一个脚本。

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

  • 集中式 Web 应用程序称为 CustomAuth
  • CustomAuth 有一个名为 Angular 2 的模块CustomAuthModule
  • CustomAuthModule 公开了几个可供外部 Angular 2 应用程序使用的服务和组件。

这是所需的工作流程（从高层次）。

  • 开发人员希望在名为 BookLibrary 的 Angular2 应用程序中使用 CustomAuth。
  • 在开发人员的索引页面上，他们添加了一个脚本 include 指向http://server-url/CustomAuth/script. 消费者不应该被要求知道任何关于像 systemjs 或 webpack 这样的模块加载器的知识。
  • 在他们的 angular2 代码中，他们从 CustomAuth 模块（服务、组件等）导入东西。
  • 当他们使用 angular-cli 编译他们的应用程序时，它不会包含 CustomAuth 代码，而是假定它将在运行时动态加载。

我对此进行了很多研究，但我没有运气弄清楚。任何帮助将不胜感激。

4

1 回答 1

4

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

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

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

如上所述，UMD是一种模式，使用此模式创建的库将支持所有模块/脚本加载器，如、 、requirejs等webpack。即遵循 UMD 模式的库将被所有主要模块系统（、和）识别.browserifysystemjsAMDCommonJSES6Vanilla JS

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

现在，即使您也必须遵循相同的 ieUMD模式。既然你的图书馆是开着的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 组件，而不管他们使用的脚本加载器/模块系统如何。

这里有一个很好的例子，他在这里解释了这一点

问：我们库的使用者如何在他们的 Angular 2 应用程序中包含这个 umd 包？

Ans：由于您的库将成为 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（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);

然后你可以像往常一样导入你的库。

网页包：

在 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在全局范围内可用。

于 2017-01-19T06:43:47.997 回答