$30 off During Our Annual Pro Sale. View Details »

TypeScriptでつくるNode.jsパッケージ

 TypeScriptでつくるNode.jsパッケージ

Fukuoka.js #8「TypeScript」

Yusuke Hirao

May 15, 2019
Tweet

More Decks by Yusuke Hirao

Other Decks in Technology

Transcript

  1. 5ZQF4DSJQUͰͭ͘Δ
    /PEFKTύοέʔδ
    'VLVPLBKTň5ZQF4DSJQUʼn
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ

    View Slide

  2. ©2019 Yusuke Hirao
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ
    5ZQF4DSJQUͰͭ͘Δ
    /PEFKTύοέʔδ
    'VLVPLBKTň5ZQF4DSJQUʼn

    View Slide

  3. ©2019 Yusuke Hirao
    ࣗݾ঺հ
    ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ
    גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ϑϩϯτΤϯυΤϯδχΞ
    #-0(IUUQTOPUFNVZVTVLFIJSBP
    Yusuke Hirao
    @cloud10designs

    View Slide

  4. ©2019 Yusuke Hirao
    ͜Μͳͷ࡞ͬͯ·͢
    KBDPKT೔ຊޠ༻จࣈม׵ϥΠϒϥϦ
    NBSLVQMJOU)5.-ϦϯλʔόϦσʔλʔ

    View Slide

  5. ©2019 Yusuke Hirao
    ࠓ೔͸ͳ͢͜ͱ
    ࠷௿ݶͷϛχϚϜͳ
    tsconfig.json
    packge.json
    ઃఆʹ͍ͭͯ

    View Slide

  6. ©2019 Yusuke Hirao
    ࠓ೔͸ͳ͞ͳ͍͜ͱ
    ܕͷ͸ͳ͠
    NPOPSFQPʹ͍ͭͯ

    View Slide

  7. ©2019 Yusuke Hirao
    ΞδΣϯμ
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ઃఆ
    Ϗϧυ͢Δ
    ύϒϦογϡ͢Δ

    View Slide

  8. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ

    View Slide

  9. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ϦϙδτϦͷσΟϨΫτϦߏ੒
    +BWB4DSJQUϑΝΠϧ΍
    ܕఆٛϑΝΠϧʢ*.d.tsʣͳͲͷॻ͖ग़͠ઌ
    w OQNͰެ։͢ΔϑΝΠϧ܊ΛೖΕΔɻ
    w HJUͰ͸আ֎͢Δɻ
    w ໊લ͸libͰ΋distͰ΋ԿͰ΋͓޷ΈͰɻϞδϡʔϧʹύεࢀ
    রͰ͖Δύοέʔδʢ5SFF4IBLJOHͷͨΊͩͬͨΓʣʹ͍ͨ͠৔
    ߹ɺσΟϨΫτϦ໊ͪΐͬͱॏཁɻʢྫKBDPKTʣ
    import toHiragana from "jaco/fn/toHiragana";
    toHiragana("ΧλΧφΛͻΒͳ͕ʹ");

    View Slide

  10. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ϦϙδτϦͷσΟϨΫτϦߏ੒
    5ZQF4DSJQUϑΝΠϧͳͲιʔείʔυஔ͖৔
    w OQNͰެ։͠ͳ͍ʢͯ͠΋͍͍ʣɻ
    w ͜͜΋໊લ͸͓޷ΈͰɻ

    View Slide

  11. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ϦϙδτϦͷσΟϨΫτϦߏ੒
    ϑΥϧμ͸ผʑ͕Φεεϝ
    w HJUOQNͷআ֎ઃఆָ͕ɻ
    w ܕఆٛϑΝΠϧʢ*.d.ts.mapʣͷιʔεϚοϓΛར༻Ͱ͖Δɻ

    View Slide

  12. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ॻ͖ग़͢+4ͷόʔδϣϯʢtargetʣ
    es5 es2017 esnext

    ϝϦοτ
    ͲΜͳ؀ڥͰ΋ಈ͘
    /PEFKTWҎ্
    ͳΒಈ͘
    import.metaରԠ
    ʢ&4.ʹඞਢʣ

    σϝϦοτ
    async/await΍
    for..ofͳͲ͕
    ϨΨγʔίʔυม׵͞ΕΔ
    ϒϥ΢βͰ࢖͏৔߹͸
    CBCFMͳͲ͕ඞཁʹͳΔ
    ී௨ʹ࢖͏ͳΒ
    CBCFMͳͲ͕ඞཁ

    View Slide

  13. ©2019 Yusuke Hirao
    ίʔυΛॻ͘લʹܾΊ͓ͯ͘͜ͱ
    ॻ͖ग़͢+4ͷϞδϡʔϧγεςϜʢmoduleʣ
    commonjs esnext ͦͷଞ

    ϝϦοτ
    ݱࡏͷඪ४
    import.metaରԠ
    ʢ&4.ʹඞਢʣ
    ͠ΒΜ

    σϝϦοτ
    &4.Ͱ࢖͑ͳ͍
    ී௨ʹ࢖͏ͳΒ
    CBCFMͳͲ͕ඞཁ
    Θ͔ΒΜ

    View Slide

  14. ©2019 Yusuke Hirao
    ઃఆ

    View Slide

  15. ©2019 Yusuke Hirao
    ઃఆ
    $ yarn init
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "author": "Yusuke Hirao ",
    "license": "MIT"
    }
    ࣮ݧͷࡍ͸4DPQFEQBDLFHFʹ͠·͠ΐ͏
    ઌʹܾΊͨσΟϨΫτϦ಺ͷΤϯτϦʔϑΝΠϧ
    import sample from "@yusukehirao/sample";
    ௨ৗͷimport࣌ͷࢀরઌʹͳΔ
    package.json

    View Slide

  16. ©2019 Yusuke Hirao
    ઃఆ
    $ yarn add -D typescript
    ίϯύΠϥΛΠϯετʔϧ
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "author": "Yusuke Hirao ",
    "license": "MIT",
    "devDependencies": {
    "typescript": "^3.4.5"
    }
    }
    package.json

    View Slide

  17. ©2019 Yusuke Hirao
    ઃఆ
    $ ./node_modules/.bin/tsc —init
    {
    "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
    }
    }
    tsconfig.json
    ܾΊͨॻ͖ग़͠ઌͱιʔείʔυஔ͖৔
    ܾΊͨ&4όʔδϣϯϞδϡʔϧγεςϜ

    View Slide

  18. ©2019 Yusuke Hirao
    ઃఆ
    $ ./node_modules/.bin/tsc —init
    {
    "compilerOptions": {
    "target": "es2017",
    "module": "commonjs",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "./lib",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true
    }
    }
    tsconfig.json
    ܕఆٛϑΝΠϧͱιʔεϚοϓϑΝΠϧͷ
    ੜ੒Λ༗ޮʹ͓ͯ͘͠

    View Slide

  19. ©2019 Yusuke Hirao
    ઃఆ
    ίϯύΠϧίϚϯυΛొ࿥
    tsc ίϚϯυΛొ࿥͓ͯ͘͠
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "author": "Yusuke Hirao ",
    "license": "MIT",
    "scripts": {
    "build": "tsc",
    "prepack": "tsc"
    },
    "devDependencies": {
    "typescript": "^3.4.5"
    }
    }
    package.json
    w Φϓγϣϯ͸tsconfig.jsonʹॻ͍͓͚ͯ
    ͹جຊ͍Βͳ͍ɻ
    w prepackεΫϦϓτ͸ύοέʔδެ։࣌ͷ
    Ϗϧυ๨Ε๷ࢭɻ

    View Slide

  20. ©2019 Yusuke Hirao
    ઃఆ
    ܕఆٛϑΝΠϧΛొ࿥
    ΤϯτϦʔϑΝΠϧͷܕఆٛϑΝΠϧͷύε
    {
    "name": "@yusukehirao/sample",
    "version": "0.1.0-alpha.0",
    "main": "lib/index.js",
    "types": "lib/index.d.ts",
    "author": "Yusuke Hirao ",
    "license": "MIT",
    "scripts": {
    "build": "tsc",
    "prepack": "tsc"
    },
    "devDependencies": {
    "typescript": "^3.4.5"
    }
    } package.json
    w ܕ৘ใΛఏڙͰ͖Δɻ
    w Α͘ @types/xxxxxͰࢀর͢Δ
    %FpOJUFMZ5ZQFE%FpOJUFMZ5ZQFEʹ13
    ૹΔඞཁͳ͍ɻ

    View Slide

  21. ©2019 Yusuke Hirao
    Ϗϧυ͢Δ

    View Slide

  22. ©2019 Yusuke Hirao
    Ϗϧυ͢Δ
    $ yarn build

    View Slide

  23. ©2019 Yusuke Hirao
    Ϗϧυ͢Δ
    $ yarn build

    View Slide

  24. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ

    View Slide

  25. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    $ touch .npmignore
    ύοέʔδʹؚ·ͳ͍ϑΝΠϧͷআ֎ઃఆΛ͢Δ
    src
    tsconfig.json
    tsconfig.tsbuildinfo
    .npmignore
    w package.jsonͷfilesʹύοέʔδʹؚΊ
    ͍ͨϑΝΠϧͷϗϫΠτϦετΛॻ͍ͯ΋Α
    ͍ɻ
    w .npmignore͔files͕ͳ͍ͱɺ.gitignore
    Λআ֎ઃఆͱΈͳ͢ͷͰɺॻ͖ग़͠ઌͷσΟϨ
    ΫτϦ͕ύοέʔδʹೖΒͳ͍൵ࢂͳ͜ͱʹͳ
    Δ

    View Slide

  26. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    $ npm publish

    View Slide

  27. ©2019 Yusuke Hirao
    ύϒϦογϡ͢Δ
    ܕఆٛϑΝΠϧ΋ެ։͍ͯ͠ΔͷͰɺ
    5ZQF4DSJQU͔Β͸΋ͪΖΜɺ+BWB4DSJQUͰ΋ܕΛࢀরͰ͖Δ

    View Slide

  28. 5ZQF4DSJQUͰ
    ར༻ͯ͠΋Β͑·͢Αʔʹ

    View Slide

  29. גࣜձࣾσΟʔθϩ
    8FCΞΫηγϏϦςΟΤϯδχΞ
    ฏඌΏ͏ͯΜ
    5ZQF4DSJQUͰͭ͘Δ
    /PEFKTύοέʔδ
    'VLVPLBKTň5ZQF4DSJQUʼn

    View Slide