捆绑Angular2 AOT与systemjs建设者和汇总树摇

Question

我这里描述花了很多时间量好让我的角2项目，SystemJS工作，现在用AOT编译：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

我使用SystemJS运行plugin-typescript在开发过程中在浏览器中传输打字稿。我已经有了使用plugin-typescript的systemjs生成器来生成AoT（ngc）输出中的sfx包。

我无法弄清楚的是如何让systemjs-builder树状摇角的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

我能够分辨当汇总正确执行，在inlineMap财产上的建设者结果将是一个数组的名称值集合：

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

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

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

映射到我已经解释为在汇总过程中做出优化的数字键数组中的项数...我不知道这在技术上是100％准确，但我在我的构建输出中使用它作为总结过程实际上做了一些事情的信心 - 数字越大越好。

为后人 - 我用下面的一口功能buildStatic和漂亮的打印结果...

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