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
280
npmパッケージを作って公開してみよう
簡単なnpmパッケージの作り方をまとめてみました
Yu Watanabe
October 12, 2018
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
Bolt 🤝 Expo
watanabeyu
0
190
npm packageとリリースとモノレポ
watanabeyu
0
54
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
820
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1.1k
gandhの紹介です
watanabeyu
0
29
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
610
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.4k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
Other Decks in Technology
See All in Technology
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
230
いまからでも遅くない!コンテナでWebアプリを動かしてみよう!コンテナハンズオン編
nomu
0
170
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Ruby on Railsで持続可能な開発を行うために取り組んでいること
am1157154
3
160
Cracking the Coding Interview 6th Edition
gdplabs
14
28k
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
8
3.9k
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
540
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
320
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
660
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
12
4.4k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
170
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Thoughts on Productivity
jonyablonski
69
4.5k
Building Your Own Lightsaber
phodgson
104
6.2k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.6k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
For a Future-Friendly Web
brad_frost
176
9.6k
Why Our Code Smells
bkeepers
PRO
336
57k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Designing Experiences People Love
moore
140
23k
Fireside Chat
paigeccino
35
3.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
A Philosophy of Restraint
colly
203
16k
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ΞϓϦʹ͍ͯ͠·͢