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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. 拡張子
    .js
    .ts
    .mjs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  17. 『Please support TypeScript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide