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
270
npmパッケージを作って公開してみよう
簡単なnpmパッケージの作り方をまとめてみました
Yu Watanabe
October 12, 2018
Tweet
Share
More Decks by Yu Watanabe
See All by Yu Watanabe
npm packageとリリースとモノレポ
watanabeyu
0
38
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
720
react-native-unimodulesを用いてのApp内課金実装
watanabeyu
0
1k
gandhの紹介です
watanabeyu
0
26
XcodeやAndroid Studioを弄らないアイコン管理
watanabeyu
2
590
Firebaseオンリー + React Nativeでアプリを作ると果たして簡単になるのか?
watanabeyu
4
1.2k
react-native-unimodulesのススメ
watanabeyu
1
6.2k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
Nix入門パラダイム編
asa1984
2
200
Gradle: The Build System That Loves To Hate You
aurimas
2
140
わたしとトラックポイント / TrackPoint tips
masahirokawahara
1
240
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
ABEMA のコンテンツ制作を最適化!生成 AI x クラウド映像編集システム / abema-ai-editor
cyberagentdevelopers
PRO
1
180
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
KATA
mclloyd
29
13k
Facilitating Awesome Meetings
lara
49
6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
107
49k
The Cult of Friendly URLs
andyhume
78
6k
Happy Clients
brianwarren
97
6.7k
GitHub's CSS Performance
jonrohan
1030
460k
Speed Design
sergeychernyshev
24
570
What's in a price? How to price your products and services
michaelherold
243
12k
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ΞϓϦʹ͍ͯ͠·͢