Share
Embed
Slide 1
Slide 1 text
AngularͷϥΠϒϥϦ࡞ʹ
͍ͭͯ
ng-kyoto Angular Meetup #8
@sayanaka
Slide 2
Slide 2 text
@sayanaka
• ࣾձਓ̑ʢͨͿΜʣ
• JavaScript৮Γͩͯ̏͠
• લ৬ɿC#ϝΠϯͷձࣾͰͳ͔ͥ1ਓ͚ͩJSॻ͍ͯ·ͨ͠
• ࠓ݄͔Βɺ͍Ζ͍Ζ͘ઙ͘৮Δձࣾʹస৬
• GO, Angular, React…
• Ϟϒϓϩָ͍͠ʢ͚ͲΊͬͪΌർΕΔʂʣ
Slide 3
Slide 3 text
ͦͦ
• ۀͰAngularͷϥΠϒϥϦ࡞ͬͯͨ
(2016ޙʙʣ
• AngularΛͬͨʮαΠτ/ΞϓϦʯͷใ͋Δ
• AngularΛͬͨʮϥΠϒϥϦʯͷ։ൃใ΄΅ͳ
͍
Slide 4
Slide 4 text
ཁ͋Δɾɾɾ
https://github.com/angular/angular-cli/
issues/1692
Slide 5
Slide 5 text
※ࡶͳ༁ :
ɹٞ͋Γ͕ͱ͏ʂͰॾʑͷཧ༝ͰɺCLI 1.xͰ࣮Ͱ͖ͳ͍Μͩʂ
https://github.com/angular/angular-cli/issues/1692#issuecomment-304970595
Slide 6
Slide 6 text
sayanaka͕͍͋ͨ
• ͍ΖΜͳAngularϥΠϒϥϦͷϏϧυํ๏Λௐࠪ
• angular-library-seed
• ngx-translate
• angular-calendar
• ௐࠪ݁ՌΛͱʹɺ͓ख webpack.config.tsΛ
࡞ʂ
Slide 7
Slide 7 text
͕͍͋ͨΜ͚ͩͲɾɾɾ
• ng build௨ͬͯɺng build —-prod௨
Βͳ͍ɾɾɾ
• AoTϏϧυ͕ͤͳ͍ɾɾɾ
Slide 8
Slide 8 text
ͦͯ͠ߟ͑ΔͷΛΊͨ
• ϓϩμΫγϣϯϏϧυ͢Δͱ͖ɺ
ng build —prod —aot=falseͰ❤
• όουϊϋͳͷͰྑ͍ࢠΊ·͠ΐ͏
• @angular/[email protected]Ͱɺ—aotΦϓγϣϯΛՃ
͢ΔͱΤϥʔు͖·͢ɻ
Slide 9
Slide 9 text
ͦͷ··࣌ܦͪ2017ळ
• ng-packagr ര
Slide 10
Slide 10 text
ng-packagr
• AngularͷPackage FormatʹԊͬͯΑ͠ͳʹϏϧυͯ͠
͘ΕΔਆϥΠϒϥϦ
• v1.0.0 - 2017/08/31ϦϦʔε
• ng-package.jsonΛ༻ҙͯ͠ɺ͋ͱී௨ͷnpmϥΠϒ
ϥϦͱಉ͡Α͏ͳײ֮Ͱpackage.jsonΛॻ͍ͯɺʮng-
packagrʯίϚϯυୟ͚ͩ͘ʂ͍͞͠ʂ
Slide 11
Slide 11 text
ng-packagr
Slide 12
Slide 12 text
ng-packagr
• ng new ~Ͱ࡞ͬͨϓϩδΣΫτ্Ͱͳ͍ͱ͍͚ͳ͍
• ʙCLI 1.x.x
• appϑΥϧμͱಉ֊ʹɺϥΠϒϥϦ༻ͷϑΥϧ
μΛ࡞ͬͯͦ͜ʹίʔυల։
• ྫɿ ng-packaged
Slide 13
Slide 13 text
ҙ
• AoTϏϧυ͕௨Βͳ͍ঢ়ଶͩͱɺϥΠϒϥϦͱͯ͠ϏϧυͰ͖
ͳ͍
• ٯʹ͍͏ͱɺϥΠϒϥϦͱͯ͠Ϗϧυ͕௨ΕɺAoT௨Δ
• export * from ‘~~’ͱ͔ॻ͍ͯΔͱɺϏϧυΤϥʔΛు͘߹͕
͋Δ
• importจͰɺʮ~~/indexʯΛলུ͠ͳ͍
• ԣணͤͣɺ໌֬ʹexport { hoge, fuga } from ‘~~’ͱ͢Δ͜ͱ
Slide 14
Slide 14 text
ಋೖ͢Δͷ໘ͦ͘͞͏ɾɾɾ
Slide 15
Slide 15 text
Angular CLI 6
• 2018.05.04ϦϦʔε - ݱࡏ v6.2.4
• ઃఆϑΝΠϧ͕มΘͬͨ
• ΊͬͪΌػೳ͕૿͑ͨ
Slide 16
Slide 16 text
Library Support!
Slide 17
Slide 17 text
Angular CLI 6
• Angular CLIͱɺng-packagr͕࿈ܞ͢ΔΑ͏ʹ
ͳͬͨ
• ng g library ~Λୟ͘ͱɺng-packagr͕མͪͯ͘
Δ
• σϞ
Slide 18
Slide 18 text
·ͱΊ
Slide 19
Slide 19 text
·ͱΊ
• ng-packagrྑ͍ͧ
• Angular CLI 6.x͔Β
ΊͬͪΌ؆୯ʹϥΠϒϥϦΛ࡞ΕΔΑ͏ʹ
ͳ͍ͬͯΔͷͰɺͥͻͬͯΈ͍ͯͩ͘͞ʂ
Slide 20
Slide 20 text
͝੩ௌ
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ