如何创建所有脚本加载器都支持的angular2库 [英] How to create angular2 library which could be supported by all script loaders

问题描述

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

How can I create a javascript file that contains an Angular 2 module that can be used by other applications, but is loaded at runtime directly from a centralized server and is NOT bundled into a specific application's code?

可以将其视为Angular 2库的CDN.要求是该库的使用者将在其页面上包含一个脚本.

Think of this as a CDN for an Angular 2 library. The requirement is that the consumers of this library will include a single script on their page.

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

It is a requirement to implement it this way, so I am not interested in any answers that suggest bundling the library into the individual application's output files. The library script must be loaded directly from the library's server at runtime.

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

• The centralized web app is called CustomAuth
• CustomAuth has a single Angular 2 module called CustomAuthModule
• CustomAuthModule exposes several services and components that can be used by external Angular 2 applications.

这是所需的工作流程(从较高层次上).

Here is the desired workflow (from a high level).

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

• A developer wants to use CustomAuth in their Angular2 application called BookLibrary.
• On the developer's index page, they add a script include that points to http://server-url/CustomAuth/script. The consumer should not be required to know anything about module loaders like systemjs or webpack.
• In their angular2 code, they import stuff from the CustomAuth module (services, components, etc...).
• When they compile their application using the angular-cli, it will not include the CustomAuth code, but will instead assume that it will be loaded on the fly at runtime.

我对此进行了大量研究，但没有运气可以解决.任何帮助将不胜感激.

I've done a lot of research on this, and I'm not having any luck figuring it out. Any help would be greatly appreciated.

推荐答案

您可以通过ES6 + Angular2 + Webpack来实现.

You can achieve this with ES6 + Angular2 + Webpack.

在此之前，让我解释一下什么是umd模块系统.

Before going into that, Let me explain what is umd module system.

UMD模式通常尝试提供与以下内容的兼容性: 当今最流行的脚本加载器(例如RequireJS等)

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others)

如上所述，UMD是一种模式，其中使用此模式创建的库将支持所有模块/脚本加载程序，例如requirejs，webpack，browserify，systemjs等.然后，所有主要模块系统(AMD，CommonJS，ES6和Vanilla JS)都将识别UMD模式.

As quoted above, UMD is a pattern where the libraries created with this pattern would support all the modules/script loaders like requirejs, webpack, browserify, systemjs etc. I.e the libraries which followed the UMD pattern would be recognized by all the major module systems (AMD, CommonJS, ES6 and Vanilla JS).

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

现在，即使您必须遵循相同的即UMD模式.由于您的库位于angular2上，因此我建议您使用ES6，Angular2和Webpack.

Now, even you have to follow the same i.e UMD pattern. Since your library is on angular2, i would suggest you to go with ES6, Angular2 and Webpack.

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

You have to set these configs to get the library in the UMD format, so that it could be used by any script loaders.

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组件，而不管他们使用的脚本加载器/模块系统是什么.

Once your webpack output bundle is ready (umd module), then any user can inject your library into the index page and start using your angular2 components regardless of script loaders/ modules systems they use.

在此处有一个很好的例子，他对此进行了解释

There is a nice example here and he explained this here

问:我们图书馆的使用者如何将这个umd包包含在他们的Angular 2应用程序中?

答案::由于您的库将成为UMD模块，因此用户可以根据他们的应用程序所使用的脚本加载器/模块系统来包含该库.

Ans: Since your library is going to be a UMD module, user can include the library based on the script loader/module system they are using with their application.

例如. 香草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):

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

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

然后，您可以照常导入库.

Then you can import your library as usual.

Webpack:

在Index.html

In Index.html

在webpack.config.js中

In webpack.config.js

{
    externals: {
        // require("your_lib") is external and available
        //  on the global var Your_Lib
        "your_lib": "Your_Lib"
    }
}

您的库在全局范围内将以Your_Lib的形式提供.

And your library would be available as Your_Lib in the global scope.

这篇关于如何创建所有脚本加载器都支持的angular2库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！