⛵

TypeScriptで作ったpackageをesbuildを使ってnpmに公開するまで

2022/05/06に公開

1件

先日私は、Reactのカスタムフックを作成してnpmに公開しました。

https://chot-inc.com/blog/a358wz0nf/

この記事は、その時の忘備録です。

今回の主な開発環境

PC: MacBook Air(M1)
OS: Monterey (12.3.1)
Node.js: v16.14.2
pnpm: v7

依存環境のインストール

pnpm add -D esbuild typescript ts-node npm-run-all

build.tsの作成

requiredとimportどちらも対応するようにesmとcjsどちらも対応を進めます。

build.ts

const { build } = require('esbuild')
const { dependencies } = require('./package.json')

const entryFile = 'src/index.ts'
const shared = {
  bundle: true,
  entryPoints: [entryFile],
  external: Object.keys(dependencies),
  logLevel: 'info',
  minify: true,
  sourcemap: false,
}

build({
  ...shared,
  format: 'esm',
  outfile: './dist/index.esm.js',
  target: ['ES6'],
})

build({
  ...shared,
  format: 'cjs',
  outfile: './dist/index.cjs.js',
  target: ['ES6'],
})

package.json

{
  "scripts": {
    "build:esbuild": "ts-node build.ts"
  }
}

型ファイルを出力する

esbuildでは型定義ファイルは出力されません。
型定義ファイルはtscコマンドで作成します。
--declarationと--emitDeclarationOnlyのオプションを渡すことで型定義ファイルのみを出力することができます。

package.json

  {
    "scripts": {
-     "build:esbuild": "ts-node build.ts"
+     "build:esbuild": "ts-node build.ts",
+     "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir './dist'",
    }
  }

tscのオプションについて詳しくはこちらをご確認ください

この時私が使ったtsconfig.jsonファイルは下記の通りです。

tsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "strict": true,
    "lib": ["ES2020", "dom"]
  },
  "include": ["./src/**/*"],
  "exclude": ["node_modules"]
}

コマンドをまとめる

npm-run-allを利用して、コマンドを並列実行します。

package.json

  {
    "scripts": {
+     "build": "run-p build:*",
      "build:esbuild": "ts-node build.ts",
      "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir './dist'",
    }
  }

package.jsonにnpm公開する際の情報を記載する

npmに公開する上で必要な情報をpackage.jsonに記載します。
こちらに詳しく掲載されていますのでご参考ください。

今回私が設定した主な情報は下記になります。

package.json

  {
+   "name": "use-microcms-iframe",
+   "version": "0.0.1",
+   "description": "Custom Hooks to create iframe fields for microCMS",
+   "main": "./dist/index.cjs.js",
+   "module": "./dist/index.esm.js",
+   "types": "./dist/index.d.ts",
+   "files": [
+     "/dist"
+   ],
    "scripts": {
      "build": "run-p build:*",
      "build:esbuild": "ts-node build.ts",
      "build:types": "tsc --declaration --emitDeclarationOnly --declarationDir './dist'"
-   }
+   },
+   "repository": {
+     "type": "git",
+     "url": "git+https://github.com/tsuki-lab/use-microcms-iframe.git"
+   },
+   "keywords": [
+     "microcms",
+     "react",
+     "typescript"
+   ],
+   "author": "hanetsuki <me@tsuki-lab.net>",
+   "license": "MIT",
+   "bugs": {
+     "url": "https://github.com/tsuki-lab/use-microcms-iframe/issues"
+   },
+   "homepage": "https://github.com/tsuki-lab/use-microcms-iframe#readme",
  }

あとはpnpm publishポチー

最後に

最近は、これあると便利かも！や自分が使いまわしたい！をnpmに公開して、weeklyDownloadを眺めるのが楽しみになってます。（一種の承認欲求）

今後も、あれやこれやに挑戦開発していきたいなーと思ひます。

参考にした記事

Discussion

hanetsuki

今更ながら、スターターリポジトリを作成しました。よければご利用ください！