Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

文脈

Slide 7

Slide 7 text

形式 CommonJS ESModule AMD UMD etc...

Slide 8

Slide 8 text

バンドラ Browserify Webpack Rollup ...etc

Slide 9

Slide 9 text

拡張子 .js .ts .mjs

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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 }

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Case.1

Slide 16

Slide 16 text

『やらない』という施策

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

言われるかもしれない

Slide 20

Slide 20 text

『Please support TypeScript 』

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

TS で書く

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Case.2

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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" }

Slide 33

Slide 33 text

Case.3

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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" } }

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

終