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

C6b1c59927729394dcc84b1b8bc86394?s=47 1natsu
April 27, 2019

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

Kyotojs.16のスライドです。

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

C6b1c59927729394dcc84b1b8bc86394?s=128

1natsu

April 27, 2019
Tweet

Transcript

  1. 2.
  2. 6.
  3. 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 }
  4. 15.
  5. 25.
  6. 26.
  7. 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" }
  8. 33.
  9. 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" } }
  10. 39.

    @pika/pack https://github.com/pikapkg/pack 全部入り 野望という感じ Config が必要 必要なプラグインをnpm install して使う publish

    用のpackage.json 入りのディレクトリを作ってくれる publish するためのcli も付いてくる
  11. 41.