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
460
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.3k
HammerGestureConfigの 浅掘り /ionic-meetup-10
sayanaka
1
370
Angular ライブラリ開発 /ng-japan-onair
sayanaka
0
210
Other Decks in Technology
See All in Technology
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
310
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
120
M365アカウント侵害時の初動対応
lhazy
7
5.1k
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.6k
分散トレーシングによる コネクティッドカーのデータ処理見える化の試み
thatsdone
0
270
【CEDEC2025】LLMを活用したゲーム開発支援と、生成AIの利活用を進める組織的な取り組み
cygames
PRO
1
1.6k
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
9.8k
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
100
Kiro Hookを Terraformで検証
ao_inoue
0
140
Recoil脱却の現状と挑戦
kirik
3
460
生成AIによる情報システムへのインパクト
taka_aki
1
200
[MIRU2025]Preference Optimization for Multimodal Large Language Models for Image Captioning Tasks
keio_smilab
PRO
0
100
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Into the Great Unknown - MozCon
thekraken
40
1.9k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Typedesign – Prime Four
hannesfritz
42
2.7k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Gamification - CAS2011
davidbonilla
81
5.4k
Raft: Consensus for Rubyists
vanstee
140
7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Automating Front-end Workflow
addyosmani
1370
200k
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͔Β ΊͬͪΌ؆୯ʹϥΠϒϥϦΛ࡞ΕΔΑ͏ʹ ͳ͍ͬͯΔͷͰɺͥͻͬͯΈ͍ͯͩ͘͞ʂ
͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ