npmパッケージ製作に関するあれこれ

by Tyankatsu

Slide 1

Slide 1 text

npmύοέʔδ੡࡞ʹؔ͢Δ ͋Ε͜Ε

Slide 2

Slide 2 text

ͨͿΜ࣌ؒ଍Γͳ͍ͷͰ ৄࡉ͸ϒϩάʹॻ͖·͢ɻ

Slide 3

Slide 3 text

ࣗݾ঺հ • νϟϯΧπ(@tyankatsu5) • ϑϩϯτΤϯυΤϯδχΞ • ࠷ۙGridsomeʹϋϚͬͯΔ • ޮ཰Խେ޷͖Ϛϯ

Slide 4

Slide 4 text

cz-format-extension ΛೋਓͰ࡞ͬͯ·͢ɻ

Slide 5

Slide 5 text

໨࣍ • ύοέʔδ໊Λߟ͑Δ • ެ։ܗࣜΛߟ͑Δ • ϒϥοΫϦετͱϗϫΠτϦετ • npm publishͷ᠘ • CHANGELOG.mdΛ࡞Δ • CONTRIBUTING.mdΛ࡞Δ • TemplateͰissueͱPRΛ͖Ε͍ʹग़ͤΔΑ͏ʹ͢Δ • travisͰnpmʹύοέʔδެ։ͯ͠΋Β͏ • travisͰσϓϩΠ࣌ͷnpmͷೋஈ֊ೝূͷ᠘

Slide 6

Slide 6 text

๻ͷpackageͷ࡞ۀͷྲྀΕ • τϐοΫϒϥϯνͰ࡞ۀ • commitʢcommitizen࢖ͬͯ΍ͬͯ·͢✌ʣ • betaϒϥϯνʹऔΓࠐΉϓϧϦΫΛग़͢ • ࠷ऴతʹbeta͔ΒmasterʹऔΓࠐΉ • ϦϦʔεόʔδϣϯʹ֘౰͢ΔscriptΛଧͭ • travisͰnpmʹެ։ͯ͠΋Β͏ m b t

Slide 7

Slide 7 text

ύοέʔδ໊Λߟ͑Δ

Slide 8

Slide 8 text

໊લͳʔ ӳޠͳʔ

Slide 9

Slide 9 text

ʮਥೋපશ։Ͱߟ͑ͨΒ͍͍Αʯ

Slide 10

Slide 10 text

ͳΔ΄Ͳ

Slide 11

Slide 11 text

ީิߟ͑ͨ • cz-customizable-format • cz-starter-format • cz-custom-format • cz-origin-format • cz-format-extension

Slide 12

Slide 12 text

શ෦͔ͬͪΐ͍͍

Slide 13

Slide 13 text

cz-format-extension • ๻Β͕࡞Γ͍ͨύοέʔδʹ߹ͬͯΔ • ໊લ͔Βਪଌ͠΍͍͢ • ࣅͨύοέʔδ໊͕ͳ͍

Slide 14

Slide 14 text

ެ։ܗࣜΛߟ͑Δ

Slide 15

Slide 15 text

scope͢Δ͔൱͔

Slide 16

Slide 16 text

// scoped package yarn add @tyankatsu0105/package-name //unique name package yarn add package-name ҧ͍

Slide 17

Slide 17 text

༻్ʹΑΔ

Slide 18

Slide 18 text

൑அج४ scope͢Δ৔߹ • ͱΓ͋͑ͣࣗ෼͕࢖͍͍͔ͨΒ • ࢖໊͍͍ͨલطʹ͚͋ͬͨͲৡΕͳ͍ scope͠ͳ͍৔߹ • ΈΜͳʹ࢖ͬͯ΄͍͠ • ͳΜ͔͔ͬͪΐ͍͍✌

Slide 19

Slide 19 text

൑அج४ scope͢Δ৔߹ • ͱΓ͋͑ͣࣗ෼͕࢖͍͍͔ͨΒ • ࢖໊͍͍ͨલطʹ͚͋ͬͨͲৡΕͳ͍ scope͠ͳ͍৔߹ɹˡ࠾༻✌✌✌✌ • ΈΜͳʹ࢖ͬͯ΄͍͠ • ͳΜ͔͔ͬͪΐ͍͍✌

Slide 20

Slide 20 text

ϒϥοΫϦετͱ ϗϫΠτϦετ

Slide 21

Slide 21 text

.npmignore • ͍ΘΏΔϒϥοΫϦετ • publish࣌ʹআ֎͍ͨ͠ϑΝΠϧΛॻ͘

Slide 22

Slide 22 text

package.json ﬁlesϑΟʔϧυ • ͍ΘΏΔϗϫΠτϦετ • publishͷର৅ʹ͍ͨ͠ϑΝΠϧΛॻ͘

Slide 23

Slide 23 text

ซ༻΋Ͱ͖Δ package.jsonͷﬁlesͰର৅ʹͨ͠ϑΥϧμͷ த͔Βɺ  .npmignoreͰɺର৅֎ϑΝΠϧΛࢦఆՄೳ Έ͍ͨͳ͜ͱ͕Ͱ͖Δɻ

Slide 24

Slide 24 text

package.json ﬁles ͚ͩͰࣄ଍Γͯ·͢ɻ

Slide 25

Slide 25 text

travisͰσϓϩΠ࣌ͷ npmͷೋஈ֊ೝূͷ᠘

Slide 26

Slide 26 text

ηΩϡϦςΟͷͨΊʹ npmʹ͸2FAઃఆͯ͠·͢

Slide 27

Slide 27 text

npmͷ E-mail,token͸ travisͷ؀ڥม਺ʹ

Slide 28

Slide 28 text

ʮOTP!!OTP!!OTP!!OTP!!ʯ

Slide 29

Slide 29 text

travisͰOTPฉ͔Ε·ͨ͠ɻ ຊ౰ʹ͋Γ͕ͱ͏͍͟͝·ͨ͠ɻ

Slide 30

Slide 30 text

2FAʹ͸Level͕͋Δ

Slide 31

Slide 31 text

npm proﬁle enable-2fa auth-only https://tailordev.fr/blog/2018/03/15/automated-npm-releases-with-travis-ci/