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

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

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. 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 }
  2. 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" }
  3. 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" } }
  4. @pika/pack https://github.com/pikapkg/pack 全部入り 野望という感じ Config が必要 必要なプラグインをnpm install して使う publish

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