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
npmパッケージを作って公開してみよう
Search
Yu Watanabe
October 12, 2018
Technology
2
300
npmパッケージを作って公開してみよう
簡単なnpmパッケージの作り方をまとめてみました
Yu Watanabe
October 12, 2018
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
310
npm packageとリリースとモノレポ
watanabeyu
0
63
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
910
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
33
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
640
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
170
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
3
9.6k
成長し続けるアプリのためのテストと設計の関係、そして意思決定の記録。
sansantech
PRO
0
120
Yahoo!しごとカタログ 新しい境地を創るエンジニア募集!
lycorptech_jp
PRO
0
130
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
150
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
3
7.3k
MobileActOsaka_250704.pdf
akaitadaaki
0
150
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
200
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
960
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
3.9k
United™️ Airlines®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
flyunitedguide
0
170
How Do I Contact HP Printer Support? [Full 2025 Guide for U.S. Businesses]
harrry1211
0
120
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Raft: Consensus for Rubyists
vanstee
140
7k
Code Reviewing Like a Champion
maltzj
524
40k
Rails Girls Zürich Keynote
gr2m
95
14k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Building an army of robots
kneath
306
45k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Why Our Code Smells
bkeepers
PRO
336
57k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Visualization
eitanlees
146
16k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Transcript
2018/10/12 ΘͨͳΏ͏ NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏
▸ ࣗݾհ ▸ NpmJSͷΞΧϯτ࡞ ▸ ؆୯ͳReactJSύοέʔδͷ࡞ ▸ ϓϩδΣΫτ࡞ ▸ ίϯϙʔωϯτ࡞
▸ Ϗϧυ ▸ ϩʔΧϧͰͷ֬ೝ ▸ ެ։ ▸ ύοέʔδ࡞ྫ ▸ React Native(Expo)ͷTwitter APIύοέʔδ ▸ React JSͷiTunesϦϯΫύοέʔδ ▸ ·ͱΊ ֓ཁ
ࣗݾհ(1) ΘͨͳΏ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։
▸ ࣄ༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ٕज़ॻయ5ʹͯ React Native(Expo) + FirebaseͷຊΛग़͠·ͨ͠
ࣗݾհ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞࣗҰਓ)Ͱฏۉྸ30ͷγχΞձࣾ ▸ ΤϯλϝܥʹಛԽͨ͠αʔϏεΛओʹӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸
μϯαʔ͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ͍͢30ඵఔͷۂͰགྷͬͯಈըΛΞοϓ
NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ NpmJSͷΞΧϯτ࡞
▸ npmύοέʔδΛެ։͢Δʹhttps://www.npmjs.com/ʹొඞਢ ▸ ແྉ/༗ྉ/ΤϯλʔϓϥΠζͷ3छྨ ▸ ొͨ͠Β$ npm adduserΛ࣮ߦ ▸ username
/ password /emailΛೖྗͯ͠tokenΛొ ▸ $ npm loginͰOK NPMJSͷΞΧϯτ࡞(1) npmύοέʔδΛ࡞Δલஈ֊ͷ४උྃ
NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ؆୯ͳReactJSύοέʔδͷ࡞
؆୯ͳREACTJSύοέʔδͷ࡞(1) Textͷ৭ͱେ͖͞Λม͑ΔΑ͏ͳύοέʔδΛ࡞Γ͍ͨ ϓϩδΣΫτ ࡞ ίϯϙʔωϯτ ࡞ ϩʔΧϧͰ֬ೝ Ϗϧυ ύοέʔδ ެ։
؆୯ͳREACTJSύοέʔδͷ࡞(2) ʙϓϩδΣΫτ࡞ʙ ▸ ·ͣ࡞Γ͍ͨύοέʔδ໊Λnpmjs.comʹͯݕࡧ ▸ σεΫτοϓʹreact-npm-package-sampleͱ͍͏σΟϨΫτϦΛ࡞͠ɺ $ npm initͰॳظԽͯ͠package.jsonΛ࡞ ͍ͭͰʹgithub༻ҙ͓ͯ͘͠ͱཧָ͕ʹ
؆୯ͳREACTJSύοέʔδͷ࡞(3) ʙίϯϙʔωϯτ࡞ʙ ▸ ςΩετͷ৭ͱେ͖͞Λม͑Δίϯϙʔωϯτͷ࡞ ▸ index.jsͱ͍͏໊લͰpackage.jsonͱಉ֊ʹอଘ ▸ utilͳͲ͕ଘࡏ͢Δ߹src/ͱ͍͏σΟϨΫτϦΛ࡞ͬͯ͋͛ΔͱΑ͍
؆୯ͳREACTJSύοέʔδͷ࡞(4) ▸ ͦͷ··ύοέʔδͱͯ͠Πϯϙʔτ͠Α͏ͱ͢Δͱ… compileΤϥʔͱͳͬͯ͠·͏ͷͰɺ es5ʹίϯύΠϧ͔ͯ͠Βnpmύοέʔδʹ͢Δඞཁ͋Γ
؆୯ͳREACTJSύοέʔδͷ࡞(5) ʙϏϧυʙ ▸ package.jsonʹbabel-cliͳͲίϯύΠϧ͢ΔͷʹඞཁͳͷΛೖΕΔ ▸ scriptsʹbuildίϚϯυΛՃ ▸ mainͱͳ͍ͬͯΔͱ͜Ζɺ ίϯύΠϧ͞ΕͨϑΝΠϧʹ͍ͨ͠ͷͰɺ dist/index.jsͱ͢Δ
▸ $ npm run buildͰϏϧυ
؆୯ͳREACTJSύοέʔδͷ࡞(6) ʙϩʔΧϧͰ֬ೝʙ ▸ ϩʔΧϧͰ֬ೝ͢Δʹ$ npm linkΛ͑OK ▸ react-npm-package-sampleͰ·ͣ$ npm link
▸ ࣍ʹςετ༻ͷϓϩδΣΫτͰ$ npm link react-npm-package-sample ϓϩδΣΫτͰimport StyledText from ‘react-npm-package-sample’Ͱ֬ೝ
؆୯ͳREACTJSύοέʔδͷ࡞(7) ʙύοέʔδެ։ʙ ▸ $ npm publishΛ͢Εࣗಈతʹެ։ ▸ You must be
logged in to publish packages.ͱ͍͏Τϥʔ͕ग़ͨΒ $ npm loginͰϩάΠϯΛ͢͜͠ͱͰղܾ ▸ .npmignoreΛ࡞͍ͬͯΒͳ͍ϑΝΠϧΛফ͓ͯ͘͜͠ͱΛΕͣʹ ▸ https://www.npmjs.com/package/react-npm-package-sample
؆୯ͳREACTJSύοέʔδͷ࡞(8) ʙमਖ਼ͳͲʙ ▸ मਖ਼ͨ͠߹ͷखॱ ▸ ύονΞοϓσʔτ(1.0.xͳͲ) -> $ npm version
patch ▸ ϚΠφʔΞοϓσʔτ(1.x.0ͳͲ) -> $ npm version minor ▸ ϝδϟʔΞοϓσʔτ(x.0.0ͳͲ) -> $ npm version major खಈͰίϚϯυೖྗͰͳ͠ όʔδϣϯΛมߋͨ͠Β$ npm publish
NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ύοέʔδ࡞ྫ React Native(Expo)ͷTwitter APIύοέʔδ
▸ https://github.com/watanabeyu/react-native-simple-twitter ▸ TwitterϩάΠϯΛ͢ΔͨΊͷWebViewΛදࣔ͢ΔͨΊͷύοέʔδ ▸ React Nativeͩͱes5ʹϏϧυ͢Δඞཁͳ͠ REACT NATIVE(EXPO)ͷTWITTER APIύοέʔδ
NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ύοέʔδ࡞ྫ React JSͷiTunesϦϯΫύοέʔδ
▸ https://www.npmjs.com/package/itunes-rss-component ▸ iTunesͷΞϓϦTOP10Λऔಘͯ͠දࣔͤ͞Δίϯϙʔωϯτ ▸ npmjsʹύοέʔδΛެ։͢ΔͱjsDeliverܦ༝ͰಡΈࠐΊΔͷͰɺ <script src=“”></script>ͱͯ͠ಡΈࠐΉ༷ͱͨ͠ ▸ <div
class=“IRC”></div>ͱ͢ΕࣗಈతʹdivʹϚϯτͯ͘͠ΕΔ REACT JSͷITUNESϦϯΫύοέʔδ
·ͱΊ ▸ npmύοέʔδΛ࡞ΔͳΒ͜͏͍͏ྲྀΕʹͳΔ ▸ React Nativeͷ߹ϏϧυΛ͠ͳ͍··ͰOK ▸ react-domΛࠐΉܗʹ͢ΕɺwidgetΛ࡞Δ͜ͱͰ͖Δ ϓϩδΣΫτ ࡞
ίϯϙʔωϯτ ࡞ ϩʔΧϧͰ֬ೝ Ϗϧυ ύοέʔδ ެ։
༨ஊ μϯαʔ͚ͷಈըϓϥοτϑΥʔϜΞϓϦ࡞ͬͯ·͢ͷͰ ڵຯ͋Δํ͠·͠ΐ͏ ͪͳΈʹཧը໘React + ElectronͰMacΞϓϦʹ͍ͯ͠·͢