Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1natsu
April 27, 2019

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

Kyotojs.16のスライドです。

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

1natsu

April 27, 2019
Tweet

More Decks by 1natsu

Other Decks in Technology

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