Angularのライブラリ作成について /ng-kyoto-angular-meetup-8

ng-kyoto Angular Meetup #8 (2018/10/06) での 発表資料です。
https://ng-kyoto.connpass.com/event/100685/

Transcript

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