如何将 Angular2 RC1 与 systemjs 捆绑在一起

Question

在候选版本 angular 之前提供了一个捆绑文件。自发布候选版本以来，不再有捆绑文件。包括 angular2 和 rxjs，我的应用程序现在在 7 秒内发出 671 个请求来加载。这阻碍了发展。

有谁知道如何捆绑 angular 和 rxjs 并将它们包含在 system.config 中？

Answer 1

为了获得更轻量级的项目，您应该选中 SystemJS Builder or JSPM 来捆绑您的项目。

示例种子项目：https://github.com/madhukard/angular2-jspm-seed

@BrunoGarcia 在这里提供了一个非常好的信息：

Answer 2

你只需要使用一个打包器：

UMD 文件： 这可能是最简单的解决方案。正如您在此 example 中看到的那样。您只需要在 systemjs 配置文件中引用 UMD 文件（对生产环境不太有用）：

System.config({
    packages: {
        app: {
            main: './main.ts',
            defaultExtension: 'ts'
        },
        '@angular/core': {
            main: 'core.umd.js',
            defaultExtension: 'js'
        },
        '@angular/compiler': {
            main: 'compiler.umd.js',
            defaultExtension: 'js'
        },
        '@angular/common': {
            main: 'common.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser-dynamic': {
            main: 'platform-browser-dynamic.umd.js',
            defaultExtension: 'js'
        },
        '@angular/platform-browser': {
            main: 'platform-browser.umd.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        }
    }
});

您可以找到另一个示例（可能更好）here！

systemjs-builder + gulp: 如果你想继续使用 systemjs，使用这个解决方案是一个很好的选择，但是我已经测试了它，我花了 30 秒来生成捆绑包，这使得它对开发没有太大用处（也许我做错了什么 [几乎可以肯定]），但您仍然可以检查如何使用系统构建器 ;
webpack: 我目前正在使用 webpack。 Webpack 有一个名为 webpack-dev-server 的开发工具，它将应用程序虚拟地捆绑在内存上，从而使开发过程中的过程更快（+ 热重载）。你可以快速找到一个video tutorial here and a more detailed description from Angular 2 documentation here。为了使用 webpack，你必须安装 webpack（如果你想安装 webpack-dev-server）包：npm i -S webpack webpack-dev-server，创建一个 webpack.config.js 文件和运行它只使用 webpack 生成捆绑文件或 webpack-dev-server --inline 创建一个服务器，自动重新捆绑你的修改。 --inline 选项在浏览器上启用自动重新加载 window:
```
// webpack.config.js file
module.exports = {
    entry: 'SRC_DIR/main.js',
    output: {
        path: 'BUILD_DIR',
        filename: 'bundle.js'
    }
}
```
现在将您的 bundle.js 文件插入您的 index.html：<script src="BUILD_DIR/bundle.js"></script>

最后这两个选项将允许您生成整个应用程序的捆绑包，您可以手动将其包含在 index.html 文件中。

Answer 3

1)con-cat 所有 js 文件和 css 文件包含在 index.html 使用 gulp-concat.

2) 捆绑 systemjs.config.js 文件中提到的 angular 库和应用程序组件。使用 gulp systemjs-builder.

3)使用 gulp-uglify.

缩小包

如何将 Angular2 RC1 与 systemjs 捆绑在一起

How to bundle Angular2 RC1 with systemjs

bundle

rxjs

systemjs

angular