将 Angular2 AoT 与 systemjs-builder 和 rollup tree shaking 捆绑在一起

Question

我花了很多时间让我的 Angular 2 项目与 SystemJS 一起工作，现在使用 AoT 编译，如下所述：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

我是运行带有 SystemJS 的插件类型脚本，用于在开发期间在浏览器中转换类型脚本。我有 systemjs 构建器使用 plugin-typescript 从 AoT (ngc) 输出中生成 sfx 包。

我想不通的是如何让 systemjs-builder 对 angular AoT 代码进行摇树优化。据我所知，systemjs-builder 似乎应该支持汇总（例如 https://github.com/systemjs/builder/issues/709），但当我在我的 buildStatic 选项中设置 rollup:true 时，我认为汇总对我来说不是运行 .

我的 typescriptOptions 来自 systemjs.config.js

transpiler: 'ts',
typescriptOptions: {
  target: 'es5',
  module: 'es6',
  emitDecoratorMetadata: true,
  experimentalDecorators: true
}

我的buildStatic电话：

 builder.buildStatic('app/main-aot.ts', paths.wwwroot + 'dst/build-aot.sfx.min.js', {
            minify: true,
            rollup: true
        }).then(function (output) {
            console.log(output.inlineMap);
        }, function (err) {
            console.log(err);
        }),

我从这张 github 票中得到了关于 output.inlineMap 的文章：https://github.com/systemjs/builder/issues/639

但我不清楚我应该期待什么。现在它只是输出 {}

这对我来说真的很新鲜，我可能完全误解了什么。寻找任何人帮助我确定汇总是否运行，确认它应该是可能的，如果是的话，希望能解决这个问题。

Answer 1

我能够辨别出当 rollup 正确执行时，构建器结果上的 inlineMap 属性将是数组的名称值集合：

{ "key1": [], "key2": [] ... }

每个键都将输入文件的名称反映到 buildStatic 中。我不使用任何 glob 模式，我运行 buildStatic 通过为我的 angular 应用程序提供单个入口点（主）文件，所以我在地图中获得了一个键。

builder.buildStatic("main.ts", "out.sfx.min.js").then((output) => {
   console.log(output.inlineMap); // => { "main.ts": [...] }
});

数组中映射到键的项目数我解释为在汇总过程中进行的优化次数...我不确定这在技术上是否 100% 准确，但我使用它在我的构建输出中，确信汇总过程确实做了一些事情——数字越大越好。

为了后代 - 我使用以下 gulp 函数来构建静态和漂亮的打印结果...

const builder = require("systemjs-builder");
const filesize = require("gulp-check-filesize");

let opts = { runtime: false, minify: true, mangle: true, rollup: true }
let inFile = "main.ts";
let outFile = "main.sfx.min.js";
builder.buildStatic(infile, outFile, opts).then((output) => {
    output = output || {};

    console.log(" ");
    console.log(`Build Summary: ${inFile.toLowerCase()}`);
    console.log("---------------------------");
    return new Promise((resolve, reject) => {
        // prints output file name, size and gzip size.
        gulp.src(outFile).pipe(filesize({ enableGzip: true }))
            .on("error", reject)
            .on("end", () => {
                // build rollup sumary.
                const map = result.inlineMap || {};
                if (Object.keys(map).length <= 0) console.log("No rollup optimizations performed.");
                Object.keys(map).forEach((key) => {
                    console.log(`Rollup '${key}': ${(map[key] && map[key].length) || 0} optimizations.`);
                });

            console.log("---------------------------");
            console.log(" ");
            resolve();
        });
    });
});

将 Angular2 AoT 与 systemjs-builder 和 rollup tree shaking 捆绑在一起

Bundle Angular2 AoT with systemjs-builder and rollup tree shaking

rollup

typescript

systemjs

systemjs-builder

angular