최신 npm 패키지를 만드는 방법

ESM과 CJS가 함께 사용되는 시대에 npm 패키지에 이러한 지원 중 하나만 추가하는 것만으로는 충분하지 않습니다.

이제 npm 패키지를 우아하게 초기화하는 방법에 대해 오늘 제 작업을 보여드리겠습니다.

설정

처음에는 만들기package.json

pnpm init

pnpm은 필요한 정보를 자동으로 생성합니다.

그런 다음 몇 가지 코드를 추가합니다.

// src/math.js
export const increment = value => ++value;

// src/index.js
import {increment} from "./math";
export default increment(0);

이제 간단한 ESM 패키지가 생겼습니다. npm 패키지의 플래그로 내보내는 항목을 지정해야 합니다. 그래서 다음 줄을 package.json에 추가합니다.

"exports": {
  "import": "./src/index.js",
}

번들러

앞에서 언급했듯이 패키지에 ESM 또는 CJS 지원만 제공하는 것으로는 충분하지 않지만 동일한 작업을 수행하는 두 세트의 코드를 손으로 작성하고 싶지 않으므로 TypeScript를 다음으로 변환할 수 있는 번들러가 필요합니다. ESM과 CJS는 ​​vite도 선택하기 때문에 esbuild을 선택합니다.

설치가 쉽습니다:

pnpm install esbuild -D

Esbuild에는 매우 사용하기 쉬운 CLI가 있습니다. package.json에 몇 가지 패키지 스크립트를 추가하기만 하면 됩니다.

"scripts": {
  "build": "npm run build:esm && npm run build:cjs",
  "build:esm": "esbuild --bundle src/index.js --format=esm --outfile=dist/esm.js",
  "build:cjs": "esbuild --bundle src/index.js --format=cjs --outfile=dist/cjs.js",
}

pnpm run build를 실행하면 dist 폴더에서 esm.js 및 cjs.js를 볼 수 있으므로 package.json를 변경할 수 있습니다.

"exports": {
  "import": "./dist/esm.js",
  "require": "./dist/cjs.js"
}

Esbuild는 기본적으로 TypeScript를 지원하므로 TypeScript를 구성할 필요가 없으며 .js 파일의 이름을 .ts 로 바꾸고 패키지 스크립트를 변경하기만 하면 됩니다.

"scripts": {
  "build": "npm run build:esm && npm run build:cjs",
  "build:esm": "esbuild --bundle src/index.ts --format=esm --outfile=dist/esm.js",
  "build:cjs": "esbuild --bundle src/index.ts --format=cjs --outfile=dist/cjs.js",
}

유형

패키지에 유형 정의를 추가하면 패키지를 더 쉽게 사용할 수 있지만 esbuild에는 유형 정의에 대한 기본 제공 지원이 없지만 플러그인을 통해 구현할 수 있습니다.

pnpm add esbuild-plugin-d.ts -D

Esbuild cli는 플러그인 사용을 지원하지 않으므로 esbuild의 JavaScript API를 사용하여 패키지를 빌드해야 합니다.

생성build.js:

// build.js

const esbuild = require("esbuild");
const { dtsPlugin } = require("esbuild-plugin-d.ts");

const option = {
    bundle: true,
    color: true,
    logLevel: "info",
    sourcemap: true,
    entryPoints: ["./src/index.ts"],
    minify: true,
}

async function run() {
    await esbuild
        .build({
            format: "esm",
            outdir: "dist",
            splitting: true,
            plugins: [dtsPlugin()],
            ...option
        })
        .catch(() => process.exit(1))

    await esbuild
        .build({
            format: "cjs",
            outfile: "./dist/cjs.js",
            ...option
        })
        .catch(() => process.exit(1))
}

run()

그런 다음 편집package.json

"scripts": {
  "build": "node build",
},

pnpm run build를 다시 실행하면 index.d.ts가 성공적으로 생성되었음을 확인할 수 있습니다.

이제 d.ts의 위치를 ​​package.json에 추가하면 유형 정의가 완료됩니다.

"types": "./dist/index.d.ts"

이제 완전한 기능을 갖춘 프로젝트가 있고 간단한 패키지를 빌드하는 데 충분하지만 큰 패키지의 경우 단위 테스트와 린트가 필요합니다.

단위 테스트

단위 테스트 라이브러리로 jest을 선택했는데 강력하고 사용하기 쉽습니다.

몇 가지 dev 종속성을 설치해야 합니다.

pnpm add -D @jest/global jest ts-jest typescript

그런 다음 jest.config.js를 만듭니다.

// jest.config.js
module.exports = {
    preset: 'ts-jest',
    transform: {
        '^.+\\.ts?$': 'ts-jest',
    },
};

Jest가 준비되었습니다. 단위 테스트를 작성해 보겠습니다.

import {increment} from "../src/math";
import {describe, expect, test} from "@jest/globals";

describe("math module", () => {
  test("0 increment equal 1", () => {
    expect(increment(0)).toBe(1);
  });
});

패키지 스크립트를 추가합니다.

"scripts": {
  "test": "jest"
},

pnpm test를 실행하여 jest를 시작합니다.

린트

eslint을 사용할 수밖에 없는 것 같습니다.

pnpm create @eslint/config

기능을 수동으로 선택한 다음 package.json에 스크립트를 추가합니다.

"scripts": {
  "lint": "eslint --ext .js,.jsx,.ts,.tsx --fix -c .eslintrc.js",
},

마침내

축하합니다. npm 패키지를 우아하게 초기화하는 방법을 배웠습니다. 의견이 있으면 어쨌든 삭제하십시오.

처음부터 빌드하지 않으려면 my template 를 사용하면 됩니다.