angular - 使用 UMD bundle bundle Angular 2 应用程序(不构建 vendor bundle )

Question

我目前正在将我的 Angular 2 应用程序与 WebPack bundle 在一起。我们仍在快速循环，因此我们不想在构建和应用程序加载过程中增加延迟，而是希望包括很少更改的 Angular 2 UMD CDN 准备好的 bundle ，例如:

<script src="https://npmcdn.com/@angular/core@2.0.0-rc.3/bundles/core.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/common@2.0.0-rc.3/bundles/common.umd.min.js"></script>
<script src="https://npmcdn.com/@angular/compiler@2.0.0-rc.3/bundles/compiler.umd.min.js"></script>

• 当我让 WebPack 做它的事情时，包运行良好但只有几 MB，因为它没有利用预构建的包或分离出 Angular 2“vendor ”代码。
• 当我使用 Angular 2 WebPack Recommendations ，例如:plugins: [ new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.bundle.js") ] ，我的应用程序包很小，但我手动构建了一个单独的、唯一的 1MB 包，其中包含大部分 Angular 2 框架，每次构建。根据我的应用程序，此文件在每次构建时都会略有变化，并且不能在我的应用程序版本或各种应用程序之间移植，并且没有“CDN”的好处。当然，我必须包含此文件才能运行我的应用程序。
• 当我使用 IgnorePlugin 过滤 @angular|rxjs 时，例如plugins: [ new webpack.IgnorePlugin(/\@angular|rxjs/) ] ，它排除了 vendor 文件，但在我的应用程序包的顶部插入了硬编码异常/抛出错误。
• 当我使用 WebPack externals 时，例如externals: ['@angular/core', ... , 我得到 function(module, exports) { module.exports = @angular/core; },在我的应用程序包中输出，这显然不起作用。 WebPack 文档不是很及时，但我想我可以指定 libraryTarget或者引用 resolve 函数，这将指示 WebPack 在模块加载中进行编译。
• 当我完全放弃 WebPack 并改用 TypeScript 编译器 bundler (根据 this guide ，它使用 UMD bundle )时，我得到 System.register()引用我期望的 NPM namespace 的调用，例如System.register("myapp/boot", ['@angular/core', ... ，但我仍在处理 SystemJS 配置以调用 UMD。附带说明一下，此文件的大小相对于 WebPack 生成的文件多了 25%。
• 如果我在前面的项目中使用 SystemJS，我希望此编译在构建过程中发生，或者作为并行过程发生，而不是作为文件保存的一部分。我猜 SystemJS-Builder (参见相关问题 here 和 here )会是这样做的方法吗？也许这也会产生比 Typescript 集成的“bundler ”更小的文件大小。

如何构建不依赖于独特重新打包的 Angular 2 包的应用程序包？

我目前正在针对 RC3 进行构建。如上所述，我的流程目前是 WebPack，但如果这样更容易，我会转向另一个工具集。

做更多研究后，我认为我被 WebPack 的“加载程序”术语误导了。我必须使用模块加载器，但 WebPack 似乎没有适合此功能的模块加载器。

要分配 UMD bundle 模块 namespace (并连接依赖项)，它们不能加载到脚本标签中。相反，必须使用给定的 this 对它们进行评估上下文作为模块引用。这意味着即使我希望它们全部同步加载，我仍然必须配置其他东西(如 SystemJS)以通过网络加载它们，因此它们的上下文是受控/包装的。

这Angular 2 plunker靠近我要找的东西。它使用 Angular 2 UMD 包，但不使用 RxJs 包，尽管如果我想要整个 RxJs 库，这看起来很容易改变。

Answer 1

我的问题中不止一种方法可行。由于 Angular 2 中的缺陷，有些不会，有些目前不会。这是我目前使用的方法:

---

WebPack + require.js

angular2-webpack-config.js

var config = {
    entry: {
        app: inputFile
    },
    externals: [
        /^@angular\//,
        /^rxjs\//
    ],
    output: {
        libraryTarget: "amd",
        path: __dirname,
        filename: './' + outputName
    },
    plugins: [
        new require('webpack').optimize.UglifyJsPlugin()
    ]
};

我只告诉它什么是 externals 以及什么伪标准机制将在运行时通过 libraryTarget(AMD/RequireJS、CommonJs/node、UMD)加载它们。我的设置只是导致外部库引用被包装在 define() 中。

请注意，我没有对 WebPack 中的路径执行任何操作。在我的软件中，node_modules 文件夹中的任何内容在我的软件和第三方模块中都有类似的引用机制。我的代码和第三方库都希望在 rxjs 找到 RxJS(例如，而不是 ../rxjs 或 'node_modules/rxjs`)。在运行时，两者都需要映射，但由于我们不允许 WebPack 进入第三方模块(我们使用预构建的 UMD)，WebPack 不是进行映射的地方。它只会映射我的代码。相反，我们应该在我们的运行时加载器中这样做:

index.htm

<script src="https://npmcdn.com/core-js/client/shim.min.js"></script>
<script src="https://npmcdn.com/zone.js@0.6.12/dist/zone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reflect-metadata/0.1.3/Reflect.min.js"></script>
<script>
    var require = (function(){
        var versions = {
            'router-deprecated': '@@2.0.0-rc.2',
            'forms': '@@0.1.1',
            'angular': '@@2.0.0-rc.4',
            'rxjs': '@@5.0.0-beta.10'
        }

        var paths = {
            'rxjs': "https://npmcdn.com/rxjs" + versions.rxjs + "/bundles/Rx.umd.min"
        };
        [
            'core',
            'http',
            'common',
            'compiler',
            'platform-browser',
            'router-deprecated',
            'platform-browser-dynamic'
        ].forEach(function (submodule) {
            var module = '@@angular/' + submodule
            paths[module] = 'https://npmcdn.com/' + module + (versions[submodule] || versions.angular) + '/bundles/' + submodule + '.umd.min';
        });

        var rxmap = {};
        [
            'Rx',
            'Observable',
            'Subject',
            'observable/PromiseObservable',
            'operator/toPromise'
        ].forEach(function (submodule) {
            rxmap['rxjs/' + submodule] = 'rxjs';
        })

        return {
            paths: paths,
            map: {
                '*': rxmap
            }
        };
    })();
</script>
<script data-main="../assets/compiled/a2.webpack.js" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.2.0/require.min.js"></script>

此外，如果您使用 WebPack 和 UMD，您可能会关心生成的文件大小和时间。这个子应用程序的 Angular 2 构建过程从大约 24 秒减少到 1 秒。它的 publish changed-size 从超过 2MB 变成了大约 100k。

这里是缓存依赖项的线载大小以供引用。奇怪的是，它们目前在 UMD 版本中比集成的 WebPack 修剪包的线路大小增加几 KB 小。

 KB
27.5 shim
 6.8 zone
 8.0 require
 3.3 platform-browser-dynamic
36.8 http
 8.7 core
20.8 common
16.5 router
98.5 compiler
27.9 platform-browser
39.0 Rx

显然，更新后我的公共(public)站点加载时间大幅减少(从大约 10-20 秒减少到 1 秒)，但这些数字因连接而异。