esbuild를 사용하여 npm에 TypeScript로 만든 패키지를 공개하기 전에

며칠 전에 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 옵션에 대한 자세한 내용은 이쪽을 확인하세요.
https://www.typescriptlang.org/docs/handbook/compiler-options.html
이때 내가 사용한 tsconfig.json 파일은 다음과 같다.
tsconfig.json

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

병합 명령

npm-run-all 명령을 병행합니다.
https://github.com/mysticatea/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를 공개합니다.
여기에 상세한 등재가 있으니 참고하세요.
https://docs.npmjs.com/cli/v8/configuring-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 <[email protected]>",
+   "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에 공개돼 위클리 다운로드를 볼 수 있을 것으로 기대된다.(일종의 인정욕구)
앞으로도 다양한 것을 개발하는 데 도전하고 싶다.

참고 자료

https://javascript.plainenglish.io/develop-and-publish-a-react-component-with-esbuild-and-typescript-3eb756adda6e
https://zenn.dev/drop_table_user/articles/6aa0b4c706e201