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
42
react-native-ffmpegを使って動画をいじくりmawasou
watanabeyu
0
750
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.3k
JavaScript製npmパッケージをTypeScriptで書き直した話
watanabeyu
0
1k
React Native Expoで行うアプリの簡単最速運用
watanabeyu
0
300
Other Decks in Technology
See All in Technology
サイバーセキュリティと認知バイアス:対策の隙を埋める心理学的アプローチ
shumei_ito
0
380
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
1
990
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.8k
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
Terraform CI/CD パイプラインにおける AWS CodeCommit の代替手段
hiyanger
1
240
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
300k
インフラとバックエンドとフロントエンドをくまなく調べて遅いアプリを早くした件
tubone24
1
430
AGIについてChatGPTに聞いてみた
blueb
0
130
Introduction to Works of ML Engineer in LY Corporation
lycorp_recruit_jp
0
120
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.2k
個人でもIAM Identity Centerを使おう!(アクセス管理編)
ryder472
3
200
20241120_JAWS_東京_ランチタイムLT#17_AWS認定全冠の先へ
tsumita
2
250
Featured
See All Featured
Designing for humans not robots
tammielis
250
25k
Ruby is Unlike a Banana
tanoku
97
11k
Building Adaptive Systems
keathley
38
2.3k
How to Ace a Technical Interview
jacobian
276
23k
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Building Applications with DynamoDB
mza
90
6.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
840
Music & Morning Musume
bryan
46
6.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
Writing Fast Ruby
sferik
627
61k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
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ΞϓϦʹ͍ͯ͠·͢