文脈の多いこのご時世にユーザーフレンドリーなモジュールをnpm-publish - Kyoto.js16

Kyotojs.16のスライドです。

こちらからでも見れます
https://slides.1natsu.net/slides/strategy-and-knowledge-for-moderately-good-npm-publish/#0

Transcript

1. 文脈の多いこのご時世に
   ユーザーフレンドリーなモジュールを
   npm­publish
   Kyoto.js 16
   

   View Slide

2. View Slide

3. このスライドの方針
   今後を見据えてモジュールを作りたいが
   がんばりたくもない
   なんか現状いい感じにしとく方法を模索している
   

   View Slide

4. CAVEAT
   ベストプラクティスではない
   いろんな文脈のこまごまとした話
   しません
   experimental
   な内容が含まれる
   なんか間違ってるかも
   事情が変わるかも
   

   View Slide

5. CAVEAT
   ケース・バイ・ケースなので
   諦めるという選択もあり
   個々のケースの詳細なコード説明
   あんまりしません
   

   View Slide

6. 文脈
   

   View Slide

7. 形式
   CommonJS
   ESModule
   AMD
   UMD
   etc...
   

   View Slide

8. バンドラ
   Browserify
   Webpack
   Rollup
   ...etc
   

   View Slide

9. 拡張子
   .js
   .ts
   .mjs
   

   View Slide

10. 文脈が多い
    誰がどこでどういう風に使うのかが多岐にわたる
    

    View Slide

11. 提供者として
    どう吐き出しておけばよい？
    

    View Slide

12. おさらい
    package.json
    のフィールド指定
    

    View Slide

13. Package.json
    の一部
    型定義ファイルの指定 ­
    フィールド名は"types"
    でもOK
    "typings": "dist/index.d.ts", //
    型定義
    {
    "main": "dist/index.js", // CommonJS
    "module": "dist/index.es.js", // ESModule
    "browser": "dist/index.umd.js", // UMD
    "unpkg": "dist/index.umd.js", // unpkg(UMD)
    "jsdelivr": "dist/index.umd.js", // jsDelivr(UMD)
    "files": ["dist"], // whitelist
    形式でnpm
    に実際に上がるファイルを指定
    "sideEffects": false // global
    に影響するポリフィルのようなものを含む場合はtrue
    }
    

    View Slide

14. なんかいろいろ用意しないといけ
    ないっすね
    

    View Slide

15. Case.1
    

    View Slide

16. 『やらない』という施策
    

    View Slide

17. index.js
    から素朴に
    module.exports
    や！
    アリといえばあり
    

    View Slide

18. 失うもの
    TreeShaking
    CodeSpliting
    人類の時間
    etc...
    

    View Slide

19. 言われるかもしれない
    

    View Slide

20. 『Please support TypeScript
    』
    

    View Slide

21. d.ts
    作って対応
    型定義欲しい気持ちはユーザー目線で見ると
    『わかる』
    

    View Slide

22. バージョンアップで
    d.ts
    追従させるのしんどい
    ユーザーから PR
    が仮に飛んできてもしんどい
    

    View Slide

23. TS
    で最初から書くかという気持ちになってしまう
    

    View Slide

24. TS
    で書く
    

    View Slide

25. c.f.
    TypeScript
    再入門 ―
    「がんばらない TypeScript
    」で、JavaScript
    を“
    柔らかい”
    静的型付き言
    語に ­ https://employment.en­japan.com/engineerhub/entry/2019/04/16/103000
    

    View Slide

26. Case.2
    

    View Slide

27. TS
    で書いて
    よっしゃできたぞってなって
    

    View Slide

28. どう吐き出すか
    なにかしらコンパイルが必要
    

    View Slide

29. いろいろ考え出してしまう
    Rollup
    とかWebpack
    とか…
    TS
    向けのplugin/loader
    Babel7
    babel
    どこで動かそう
    

    View Slide

30. 見返りがあるならガンバリで config
    書いてもよい
    が…
    質素なモジュールではしんどい
    config
    のメンテな～
    

    View Slide

31. TS
    のコンパイラで素朴に吐く
    

    View Slide

32. npm­scripts
    に書く
    tsconfig.prod.json
    をベースにして変えたいオプションを引数指定する
    "build:esnext": "tsc --module esnext --target esnext
    --outDir dist/es --project tsconfig.prod.json",
    "scripts": {
    "build": "npm run build:esnext && npm run build:esm && npm run build:cjs",
    "build:esm": "tsc --module esnext --target es5
    --outDir dist/esm --project tsconfig.prod.json",
    "build:cjs": "tsc --module commonjs --target es5
    --outDir dist/cjs --project tsconfig.prod.json"
    }
    

    View Slide

33. Case.3
    

    View Slide

34. もうちょいなんかラクしつつ
    いい感じになって欲しい
    ツールに頼る作戦
    

    View Slide

35. モジュール吐き出し用のバンドラ
    いろいろある
    いくつか見てよさげなやつを紹介
    

    View Slide

36. Microbundle
    https://github.com/developit/microbundle
    developit
    氏が主に作っている
    TS
    対応
    Rollup
    をラップ
    zero­config
    etc...
    

    View Slide

37. Microbundle(v.0.11.0)
    リポジトリdocs
    から拝借
    {
    "source": "src/foo.js",
    "main": "dist/foo.js",
    "module": "dist/foo.mjs",
    "unpkg": "dist/foo.umd.js",
    "scripts": {
    "build": "microbundle",
    "dev": "microbundle watch"
    }
    }
    

    View Slide

38. Bili
    https://github.com/egoist/bili
    egoist
    氏が主に作っている
    別にVue
    専用ではない
    microbundle
    に似ているが
    オプショナル&
    プラガブル
    CSS
    まわりのサポートも厚い
    

    View Slide

39. @pika/pack
    https://github.com/pikapkg/pack
    全部入り
    野望という感じ
    Config
    が必要
    必要なプラグインをnpm install
    して使う
    publish
    用のpackage.json
    入りのディレクトリを作ってくれる
    publish
    するためのcli
    も付いてくる
    

    View Slide

40. 適材適所・十人十色なので
    規模感と自分がどこまでやりたいかによるので
    ベストプラクティスはない
    

    View Slide

41. 終
    

    View Slide