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
340
npm packageとリリースとモノレポ
watanabeyu
0
64
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
950
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
35
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
660
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.3k
react-native-unimodulesのススメ
watanabeyu
1
6.5k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1.1k
Other Decks in Technology
See All in Technology
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
870
組織全員で向き合うAI Readyなデータ利活用
gappy50
3
1.2k
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
980
OPENLOGI Company Profile for engineer
hr01
1
45k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
110
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
280
CLIPでマルチモーダル画像検索 →とても良い
wm3
0
120
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
sayn0
1
330
Kubernetes self-healing of your workload
hwchiu
0
570
OSSで50の競合と戦うためにやったこと
yamadashy
3
1k
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
4
1.1k
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Language of Interfaces
destraynor
162
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
It's Worth the Effort
3n
187
28k
Scaling GitHub
holman
463
140k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
We Have a Design System, Now What?
morganepeng
53
7.8k
BBQ
matthewcrist
89
9.9k
Speed Design
sergeychernyshev
32
1.2k
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ΞϓϦʹ͍ͯ͠·͢