Question

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

我正在运行带有SystemJS的plugin-typescript，以便在开发过程中在浏览器中转换typescript。我已经使用plugin-typescript生成了系统构建器，以便从AoT（ngc）输出中生成sfx bundle。

我能弄清楚的是如何让systemjs-builder对角度AoT代码进行树形抖动。据我所知，似乎systemjs-builder应该支持汇总（例如https://github.com/systemjs/builder/issues/709）但是当我在buildStatic选项中设置rollup:true时，我不认为汇总正在为我运行。

来自typescriptOptions的{{1}}

systemjs.config.js

我的transpiler: 'ts', typescriptOptions: { target: 'es5', module: 'es6', emitDecoratorMetadata: true, experimentalDecorators: true }电话：

buildStatic

我从这张github票证中得到了关于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); }),的文章：https://github.com/systemjs/builder/issues/639

但我不清楚我应该期待什么。现在它只输出output.inlineMap

这对我来说真的很新，我可能完全误解了一些东西。寻找任何人来帮助我确定汇总是否正在运行，确认它应该是可能的，并希望如果它已经整理好了。

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％准确，但我在我的使用中将输出建立为置信过程实际上做了一些事情的信心 - 更大的数字更好。

对于后代 - 我使用以下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和汇总树摇动

1 个答案: