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

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. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ