捆綁Angular2 AOT與systemjs建設者和彙總樹搖

我這裏描述花了很多時間量好讓我的角2項目，SystemJS工作，現在用AOT編譯：https://angular.io/docs/ts/latest/cookbook/aot-compiler.html 捆綁Angular2 AOT與systemjs建設者和彙總樹搖

我使用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

但它不是我清楚我應該期待什麼。現在它只是輸出{}

這對我來說真的很新，我可能完全誤解了一些東西。尋找任何人來幫助我確定彙總是否正在運行，確認它應該是可能的，並希望如果它是這樣整理出來。

來源

2017-02-04 josh-sachs

我一直運行到同樣的問題我自己。並想知道你是否找到了你原來的問題的答案。 –

@ N.Schipper我發佈了一個解決方案，下面我經過一系列的試驗和錯誤後登陸。不幸的是，我從來沒有對inlineMap的內容進行深入的定義，但是我能夠很好地解決我自己的問題，以便繼續前進。 –

我能夠分辨當彙總正確執行，在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(); 
     }); 
    }); 
});

來源

2017-05-24 15:27:21

嗯謝謝你，我會在下週的工作中看看這個！ –

捆綁Angular2 AOT與systemjs建設者和彙總樹搖

回答

相關問題