Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Angularのライブラリ作成について /ng-kyoto-angular-meetup-8
Search
Sayaka Nakatsuka
October 06, 2018
Technology
0
440
Angularのライブラリ作成について /ng-kyoto-angular-meetup-8
ng-kyoto Angular Meetup #8 (2018/10/06) での 発表資料です。
https://ng-kyoto.connpass.com/event/100685/
Sayaka Nakatsuka
October 06, 2018
Tweet
Share
More Decks by Sayaka Nakatsuka
See All by Sayaka Nakatsuka
Angular 7 から 8にあげてみた /ng-kyoto-angular-meetup-10
sayanaka
3
2.2k
HammerGestureConfigの 浅掘り /ionic-meetup-10
sayanaka
1
360
Angular ライブラリ開発 /ng-japan-onair
sayanaka
0
200
Other Decks in Technology
See All in Technology
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
6
1.5k
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
39k
新しいスケーリング則と学習理論
taiji_suzuki
9
3.5k
サーバーなしでWordPress運用、できますよ。
sogaoh
PRO
0
170
mixi2 の技術スタックを探ってみる (アプリ編)
ichiki1023
0
110
スケールし続ける事業とサービスを支える組織とアーキテクチャの生き残り戦略 / The survival strategy for Money Forward’s engineering.
moneyforward
0
210
Opcodeを読んでいたら何故かphp-srcを読んでいた話
murashotaro
0
360
アジャイルチームが変化し続けるための組織文化とマネジメント・アプローチ / Agile management that enables ever-changing teams
kakehashi
2
1.8k
AWS re:Invent 2024 ふりかえり勉強会
yhana
0
680
エンジニアリングマネージャー視点での、自律的なスケーリングを実現するFASTという選択肢 / RSGT2025
yoshikiiida
4
2.2k
ヤプリQA課題の見える化
gu3
0
140
ソフトウェア開発における「パーフェクトな意思決定」/Perfect Decision-Making in Software Development
yayoi_dd
2
2.6k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Gamification - CAS2011
davidbonilla
80
5.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
112
50k
GitHub's CSS Performance
jonrohan
1030
460k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
How GitHub (no longer) Works
holman
312
140k
Building an army of robots
kneath
302
44k
Adopting Sorbet at Scale
ufuk
74
9.1k
Optimizing for Happiness
mojombo
376
70k
Bash Introduction
62gerente
609
210k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
Producing Creativity
orderedlist
PRO
343
39k
Transcript
AngularͷϥΠϒϥϦ࡞ʹ ͍ͭͯ ng-kyoto Angular Meetup #8 @sayanaka
@sayanaka • ࣾձਓ̑ʢͨͿΜʣ • JavaScript৮Γͩͯ̏͠ • લ৬ɿC#ϝΠϯͷձࣾͰͳ͔ͥ1ਓ͚ͩJSॻ͍ͯ·ͨ͠ • ࠓ݄͔Βɺ͍Ζ͍Ζ͘ઙ͘৮Δձࣾʹస৬ •
GO, Angular, React… • Ϟϒϓϩָ͍͠ʢ͚ͲΊͬͪΌർΕΔʂʣ
ͦͦ • ۀͰAngularͷϥΠϒϥϦ࡞ͬͯͨ (2016ޙʙʣ • AngularΛͬͨʮαΠτ/ΞϓϦʯͷใ͋Δ • AngularΛͬͨʮϥΠϒϥϦʯͷ։ൃใ΄΅ͳ ͍
ཁ͋Δɾɾɾ https://github.com/angular/angular-cli/ issues/1692
※ࡶͳ༁ : ɹٞ͋Γ͕ͱ͏ʂͰॾʑͷཧ༝ͰɺCLI 1.xͰ࣮Ͱ͖ͳ͍Μͩʂ https://github.com/angular/angular-cli/issues/1692#issuecomment-304970595
sayanaka͕͍͋ͨ • ͍ΖΜͳAngularϥΠϒϥϦͷϏϧυํ๏Λௐࠪ • angular-library-seed • ngx-translate • angular-calendar •
ௐࠪ݁ՌΛͱʹɺ͓ख webpack.config.tsΛ ࡞ʂ
͕͍͋ͨΜ͚ͩͲɾɾɾ • ng build௨ͬͯɺng build —-prod௨ Βͳ͍ɾɾɾ • AoTϏϧυ͕ͤͳ͍ɾɾɾ
ͦͯ͠ߟ͑ΔͷΛΊͨ • ϓϩμΫγϣϯϏϧυ͢Δͱ͖ɺ ng build —prod —aot=falseͰ❤ • όουϊϋͳͷͰྑ͍ࢠΊ·͠ΐ͏ •
@angular/
[email protected]
Ͱɺ—aotΦϓγϣϯΛՃ ͢ΔͱΤϥʔు͖·͢ɻ
ͦͷ··࣌ܦͪ2017ळ • ng-packagr ര
ng-packagr • AngularͷPackage FormatʹԊͬͯΑ͠ͳʹϏϧυͯ͠ ͘ΕΔਆϥΠϒϥϦ • v1.0.0 - 2017/08/31ϦϦʔε •
ng-package.jsonΛ༻ҙͯ͠ɺ͋ͱී௨ͷnpmϥΠϒ ϥϦͱಉ͡Α͏ͳײ֮Ͱpackage.jsonΛॻ͍ͯɺʮng- packagrʯίϚϯυୟ͚ͩ͘ʂ͍͞͠ʂ
ng-packagr
ng-packagr • ng new ~Ͱ࡞ͬͨϓϩδΣΫτ্Ͱͳ͍ͱ͍͚ͳ͍ • ʙCLI 1.x.x • appϑΥϧμͱಉ֊ʹɺϥΠϒϥϦ༻ͷϑΥϧ
μΛ࡞ͬͯͦ͜ʹίʔυల։ • ྫɿ ng-packaged
ҙ • AoTϏϧυ͕௨Βͳ͍ঢ়ଶͩͱɺϥΠϒϥϦͱͯ͠ϏϧυͰ͖ ͳ͍ • ٯʹ͍͏ͱɺϥΠϒϥϦͱͯ͠Ϗϧυ͕௨ΕɺAoT௨Δ • export * from
‘~~’ͱ͔ॻ͍ͯΔͱɺϏϧυΤϥʔΛు͘߹͕ ͋Δ • importจͰɺʮ~~/indexʯΛলུ͠ͳ͍ • ԣணͤͣɺ໌֬ʹexport { hoge, fuga } from ‘~~’ͱ͢Δ͜ͱ
ಋೖ͢Δͷ໘ͦ͘͞͏ɾɾɾ
Angular CLI 6 • 2018.05.04ϦϦʔε - ݱࡏ v6.2.4 • ઃఆϑΝΠϧ͕มΘͬͨ
• ΊͬͪΌػೳ͕૿͑ͨ
Library Support!
Angular CLI 6 • Angular CLIͱɺng-packagr͕࿈ܞ͢ΔΑ͏ʹ ͳͬͨ • ng g
library ~Λୟ͘ͱɺng-packagr͕མͪͯ͘ Δ • σϞ
·ͱΊ
·ͱΊ • ng-packagrྑ͍ͧ • Angular CLI 6.x͔Β ΊͬͪΌ؆୯ʹϥΠϒϥϦΛ࡞ΕΔΑ͏ʹ ͳ͍ͬͯΔͷͰɺͥͻͬͯΈ͍ͯͩ͘͞ʂ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ