AngularͱWebpackͰ AoTίϯύΠϧ͢Δ·Ͱͷ࿩ Զͷ࿩Λฉ͚ʂʂLTେձ #2
 2017/04/26 

ࣗݾ঺հ • ৽෱ ٓါ ʢShinpuku Noriyukiʣ • גࣜձࣾϨείʢچ: ϕʔλιϑτʣ • ϑϩϯτΤϯυେ޷͖ʂ
 https://github.com/puku0x 

։ൃதͷϓϩμΫτ 

എܠ • ϑϩϯτΤϯυपΓҰ৽͍ͨ͠ • Webpackಋೖ • AngularJS → Angular4΁ 

Webpack 

Webpack 2.x • ґଘؔ܎ղܾͱม׵ˍ݁߹ 

Ҏલ࡞ͬͨ΋ͷ • npm + Webpack + PhoneGap ES5/CSS3 ʹม׵ https://github.com/puku0x/angularjs-onsenui2-webpack2 

Angular 

Angular 4.x • Google੡ͷMVˎϑϨʔϜϫʔΫ • AngularJSͱ͸ผ෺ (ƅЧƅ))
 ίϯϙʔωϯτࢦ޲ɺCSSΧϓηϧ ԽɺTypeScriptɺRxJS ɾɾɾ 

͋Μ͗ΎΒʔͬͯ
 ஗͍ΜͰ͠ΐʁ 

AoTʢAhead of Timeʣ • ࣮ߦલʹ੩తͳDOMੜ੒ίʔυʹ ίϯύΠϧ͢Δॲཧ • όϯυϧαΠζ͸ͪΐͬͱ૿͑Δ • ը໘දࣔΛߴ଎Խ 

AoTͷઃఆʁʁ • ͳΜ͔೉ͦ͠͏… 

@ngtools/webpack 

AoTϓϥάΠϯ • طଘͷwebpack.config.jsʹ௥Ճ͢ Δ͚ͩͰAoT༗ޮԽͰ͖Δ • ͜ΕͰউͭΔʂ 

Webpackઃఆ 

AoTઃఆʢWebpackʣ const AotPlugin = require('@ngtools/webpack').AotPlugin; config.plugins.push( new AotPlugin({ tsConfigPath: helpers.root('tsconfig.aot.json'), entryModule: helpers.root('src', 'app', 'app.module#AppModule'), }) ); config.module.rules.push({ test: /\.ts$/, use: ['@ngtools/webpack'] }); ϓϥάΠϯ ϩʔμઃఆ 

AoTઃఆʢTypeScriptʣ { "angularCompilerOptions": { "genDir": "aot", "skipMetadataEmit": true }, "compilerOptions": { "target": "es5", "module": "commonjs", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, UTDPOpHKTPOʹ
 "OHVMBS༻ͷઃఆ௥Ճ 

AoTͷޮՌΛଌΔ 6TFS
5JNF
"1*
 Λ࢖͏ Ϟδϡʔϧͷىಈ։͔࢝Β
 දࣔϖʔδͷඳը׬ྃ·ͰΛܭଌ 

ଌఆ݁Ռ "P5ແޮ "P5༗ޮ όϯυϧαΠζ
 <,#>   දࣔ·Ͱͷ࣌ؒ
   n=10 

AoTޮՌ͋Γ ίϯϙʔωϯτ਺͕૿͑Ε͹͞ΒʹޮՌUP!? 

·ͱΊ • AoTΛ࢖͓͏ • @ngtools/webpackͳΒ؆୯ʂ • Angular CLI΍Ionic CLI͸ඪ४౥ࡌ 

ϋϚͬͨͱ͜Ζ • LoaderOptionsPluginͰ
 minimize: true ͱͯ͠͸͍͚ͳ͍ • CSSϩʔμपΓ͸include࢖͓͏ ↓ࠓճͷ݁Ռ
 https://github.com/puku0x/angular-onsenui2-webpack2