npmパッケージを作って公開してみよう

簡単なnpmパッケージの作り方をまとめてみました

Transcript

1. 2018/10/12 Θͨͳ΂Ώ͏ NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏
2. ▸ ࣗݾ঺հ ▸ NpmJSͷΞΧ΢ϯτ࡞੒ ▸ ؆୯ͳReactJSύοέʔδͷ࡞੒ ▸ ϓϩδΣΫτ࡞੒ ▸ ίϯϙʔωϯτ࡞੒ ▸ Ϗϧυ ▸ ϩʔΧϧͰͷ֬ೝ ▸ ެ։ ▸ ύοέʔδ࡞੒ྫ ▸ React Native(Expo)ͷTwitter APIύοέʔδ ▸ React JSͷiTunesϦϯΫύοέʔδ ▸ ·ͱΊ ֓ཁ
3. ࣗݾ঺հ(1) Θͨͳ΂Ώ͏ ▸ ॴଐ ▸ גࣜձࣾg&h ▸ Web / ΞϓϦΛझຯͰެ։ ▸ ࢓ࣄ಺༰ ▸ αʔό / ϑϩϯτ / ΞϓϦ / Web ▸ ΞΧ΢ϯτ ▸ Twitter : @hmktsu ▸ Github : @watanabeyu ٕज़ॻయ5ʹͯ React Native(Expo) + FirebaseͷຊΛग़͠·ͨ͠
4. ࣗݾ঺հ(2) ▸ https://www.gandh.jp ▸ 3໊(ΤϯδχΞ͸ࣗ෼Ұਓ)Ͱฏۉ೥ྸ30൒͹ͷγχΞձࣾ ▸ ΤϯλϝܥʹಛԽͨ͠αʔϏεΛओʹӡӦ ▸ ݱࡏͷϝΠϯࣄۀɿhttps://www.weddyweddy.net ▸ μϯαʔ޲͚ͷϓϥοτϑΥʔϜܥSNSΞϓϦ ▸ ͪ͜ΒͰνϣΠεͨ͠གྷΓ΍͍͢30ඵఔ౓ͷۂͰགྷͬͯಈըΛΞοϓ
5. NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ NpmJSͷΞΧ΢ϯτ࡞੒
6. ▸ npmύοέʔδΛެ։͢Δʹ͸https://www.npmjs.com/ʹొ࿥ඞਢ ▸ ແྉ/༗ྉ/ΤϯλʔϓϥΠζͷ3छྨ ▸ ొ࿥ͨ͠Β$ npm adduserΛ࣮ߦ ▸ username / password /emailΛೖྗͯ͠tokenΛొ࿥ ▸ $ npm loginͰ΋OK NPMJSͷΞΧ΢ϯτ࡞੒(1) npmύοέʔδΛ࡞Δલஈ֊ͷ४උ׬ྃ
7. NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ؆୯ͳReactJSύοέʔδͷ࡞੒
8. ؆୯ͳREACTJSύοέʔδͷ࡞੒(1) Textͷ৭ͱେ͖͞Λม͑ΔΑ͏ͳύοέʔδΛ࡞Γ͍ͨ ϓϩδΣΫτ ࡞੒ ίϯϙʔωϯτ ࡞੒ ϩʔΧϧͰ֬ೝ Ϗϧυ ύοέʔδ ެ։
9. ؆୯ͳREACTJSύοέʔδͷ࡞੒(2) ʙϓϩδΣΫτ࡞੒ʙ ▸ ·ͣ͸࡞Γ͍ͨύοέʔδ໊Λnpmjs.comʹͯݕࡧ ▸ σεΫτοϓʹreact-npm-package-sampleͱ͍͏σΟϨΫτϦΛ࡞੒͠ɺ
 $ npm initͰॳظԽͯ͠package.jsonΛ࡞੒ ͍ͭͰʹgithub΋༻ҙ͓ͯ͘͠ͱ؅ཧָ͕ʹ
10. ؆୯ͳREACTJSύοέʔδͷ࡞੒(3) ʙίϯϙʔωϯτ࡞੒ʙ ▸ ςΩετͷ৭ͱେ͖͞Λม͑Δίϯϙʔωϯτͷ࡞੒ ▸ index.jsͱ͍͏໊લͰpackage.jsonͱಉ֊૚ʹอଘ ▸ utilͳͲ͕ଘࡏ͢Δ৔߹͸src/ͱ͍͏σΟϨΫτϦΛ࡞ͬͯ͋͛ΔͱΑ͍
11. ؆୯ͳREACTJSύοέʔδͷ࡞੒(4) ▸ ͦͷ··ύοέʔδͱͯ͠Πϯϙʔτ͠Α͏ͱ͢Δͱ… compileΤϥʔͱͳͬͯ͠·͏ͷͰɺ es5ʹίϯύΠϧ͔ͯ͠Βnpmύοέʔδʹ͢Δඞཁ͋Γ
12. ؆୯ͳREACTJSύοέʔδͷ࡞੒(5) ʙϏϧυʙ ▸ package.jsonʹbabel-cliͳͲίϯύΠϧ͢Δͷʹඞཁͳ΋ͷΛೖΕΔ ▸ scriptsʹbuildίϚϯυΛ௥Ճ ▸ mainͱͳ͍ͬͯΔͱ͜Ζ͸ɺ
 ίϯύΠϧ͞ΕͨϑΝΠϧʹ͍ͨ͠ͷͰɺ
 dist/index.jsͱ͢Δ ▸ $ npm run buildͰϏϧυ
13. ؆୯ͳREACTJSύοέʔδͷ࡞੒(6) ʙϩʔΧϧͰ֬ೝʙ ▸ ϩʔΧϧͰ֬ೝ͢Δʹ͸$ npm linkΛ࢖͑͹OK ▸ react-npm-package-sample಺Ͱ·ͣ͸$ npm link ▸ ࣍ʹςετ༻ͷϓϩδΣΫτ಺Ͱ$ npm link react-npm-package-sample ϓϩδΣΫτ಺Ͱimport StyledText from ‘react-npm-package-sample’Ͱ֬ೝ
14. ؆୯ͳREACTJSύοέʔδͷ࡞੒(7) ʙύοέʔδެ։ʙ ▸ $ npm publishΛ͢Ε͹ࣗಈతʹެ։ ▸ You must be logged in to publish packages.ͱ͍͏Τϥʔ͕ग़ͨΒ
 $ npm loginͰϩάΠϯΛ͠௚͢͜ͱͰղܾ ▸ .npmignoreΛ࡞͍ͬͯΒͳ͍ϑΝΠϧΛফ͓ͯ͘͜͠ͱΛ๨Εͣʹ ▸ https://www.npmjs.com/package/react-npm-package-sample
15. ؆୯ͳREACTJSύοέʔδͷ࡞੒(8) ʙमਖ਼ͳͲʙ ▸ मਖ਼ͨ͠৔߹ͷखॱ ▸ ύονΞοϓσʔτ(1.0.xͳͲ) -> $ npm version patch ▸ ϚΠφʔΞοϓσʔτ(1.x.0ͳͲ) -> $ npm version minor ▸ ϝδϟʔΞοϓσʔτ(x.0.0ͳͲ) -> $ npm version major खಈͰ΋ίϚϯυೖྗͰ΋໰୊ͳ͠ όʔδϣϯΛมߋͨ͠Β$ npm publish
16. NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ύοέʔδ࡞੒ྫ React Native(Expo)ͷTwitter APIύοέʔδ
17. ▸ https://github.com/watanabeyu/react-native-simple-twitter ▸ TwitterϩάΠϯΛ͢ΔͨΊͷWebViewΛදࣔ͢ΔͨΊͷύοέʔδ ▸ React Nativeͩͱes5ʹϏϧυ͢Δඞཁͳ͠ REACT NATIVE(EXPO)ͷTWITTER APIύοέʔδ
18. NPMύοέʔδΛ࡞ͬͯެ։ͯ͠ΈΑ͏ ύοέʔδ࡞੒ྫ React JSͷiTunesϦϯΫύοέʔδ
19. ▸ https://www.npmjs.com/package/itunes-rss-component ▸ iTunesͷΞϓϦTOP10Λऔಘͯ͠දࣔͤ͞Δίϯϙʔωϯτ ▸ npmjsʹύοέʔδΛެ։͢ΔͱjsDeliverܦ༝ͰಡΈࠐΊΔͷͰɺ
 <script src=“”></script>ͱͯ͠ಡΈࠐΉ࢓༷ͱͨ͠ ▸ <div class=“IRC”></div>ͱ͢Ε͹ࣗಈతʹdiv಺ʹϚ΢ϯτͯ͘͠ΕΔ REACT JSͷITUNESϦϯΫύοέʔδ
20. ·ͱΊ ▸ npmύοέʔδΛ࡞ΔͳΒ͹͜͏͍͏ྲྀΕʹͳΔ ▸ React Nativeͷ৔߹͸ϏϧυΛ͠ͳ͍··ͰOK ▸ react-domΛ࢓ࠐΉܗʹ͢Ε͹ɺwidgetΛ࡞Δ͜ͱ΋Ͱ͖Δ ϓϩδΣΫτ ࡞੒ ίϯϙʔωϯτ ࡞੒ ϩʔΧϧͰ֬ೝ Ϗϧυ ύοέʔδ ެ։
21. ༨ஊ μϯαʔ޲͚ͷಈըϓϥοτϑΥʔϜΞϓϦ࡞ͬͯ·͢ͷͰ ڵຯ͋Δํ͸࿩͠·͠ΐ͏ ͪͳΈʹ؅ཧը໘͸React + ElectronͰMacΞϓϦʹ͍ͯ͠·͢