Пакет Angular2 AoT с systemjs-строитель и встряхивания дерева накопления
Я потратил много времени на то, чтобы мой проект Angular 2 работал с SystemJS, а теперь с AoT-компиляцией, как описано здесь: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
Я запускаю плагин-машинопись с SystemJS для переноса машинописи в браузере во время разработки. У меня есть сборщик systemjs, использующий plugin-typcript для генерации пакета sfx из вывода AoT (ngc).
Что я не могу понять, так это как заставить systemjs-builder потрясти древний угловой AoT-код. Из того, что я могу сказать, похоже, что systemjs-builder должен поддерживать накопительный пакет (например, https://github.com/systemjs/builder/issues/709), но я не думаю, что накопительный пакет работает для меня, когда я установил rollup:true
в моих вариантах buildStatic.
мой 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);
}),
Я получил часть о output.inlineMap
с этого билета GitHub: https://github.com/systemjs/builder/issues/639
Но мне не ясно, чего мне ожидать. Прямо сейчас это просто выводит {}
Это все действительно ново для меня, возможно, я что-то совершенно не понимаю. Ищите кого-нибудь, кто поможет мне определить, работает ли накопительный пакет, подтвердить, что это возможно, и, надеюсь, разобраться, если это так.
1 ответ
Я смог заметить, что при правильном выполнении свертки inlineMap
Свойство результата компоновщика будет коллекцией значений имен массивов:
{ "key1": [], "key2": [] ... }
Каждый ключ отражает имя входного файла в buildStatic
, Я не использую никаких шаблонов глобуса, я запускаю buildStatic, передавая ему единственный файл точки входа (основной) для моего углового приложения, поэтому я получаю один ключ на карте.
builder.buildStatic("main.ts", "out.sfx.min.js").then((output) => {
console.log(output.inlineMap); // => { "main.ts": [...] }
});
Количество элементов в массиве, сопоставленных с ключом, которое я интерпретировал как количество оптимизаций, выполненных в процессе свертки... Я не уверен, что это технически точно на 100%, но я использую его в выходных данных сборки как уверенность в том, что процесс объединения действительно что-то сделал - где большие числа лучше.
Для потомков - я использую следующую функцию gulp для 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();
});
});
});