[NPM] npm 트래킹api 라이브러리 만들기 (ESM,CJS지원)

타 마케팅 개발가이드를 보며 라이브러리 설치하여 고객사쪽에서 트래킹하는 함수를 만들어 보기위해 테스트를 진행하였다. 이번기회로 여러 NPM 패키지를 객체지향이 아닌 함수형 프로그래밍으로 만들길 희망해본다.

 

개발환경

$ node -v
v18.16.1

$ npm -v
9.5.1

NPM 로컬 로그인 

$ npm login
$ npm whoami

Module 작성

import axios from "axios";
interface TrackingData {
  name?: string;
  event?: string;
  sex?: string;
  type?: string;
}

async function sendTrackingData1({ name, event, sex, type }: TrackingData) {
  try {
    const response = await axios.get(
      `https://web-crawaling.vercel.app/api/post-tracking?name=${name}&event=${event}&sex=${sex}&type=${type}`
    );
    return response.data;
  } catch (error) {
    console.error("트래킹 데이터 전송 중 오류 발생:", error);
    throw error;
  }
}

export {
  sendTrackingData1
}

배포

npm publish

 

CommonJS 와 ECMAScript Module

• CJS는 require / module.exports를 사용하고, ESM은 import / export 문을 사용
• CJS module loader는 동기적으로 작동하고, ESM module loader는 비동기적으로 동작
• ESM은 Top-level Await을 지원하기 때문에 비동기적으로 동작
• 따라서 ESM에서 CJS를 import 할 수는 있지만, CJS에서 ESM을 require 못함. 왜냐하면 CJS는 Top-level Await을 지원하지 않기 때문
• 이 외에도 두 Module System은 기본적으로 동작이 다르다
• 따라서 두 Module System은 서로 호환되기 어렵

그리고 최신 브라우저에서는 대부분 esm을 지원하고, 대부분 코드를 작성할 때도 esm을 사용한다. 

(react 코드에서는 import 사용 node 에서나 서버사이드 에서는 require 사용 )

 

타입스크립트지원

$ yarn add typescript @types/node -D

 

tsconfig.json 생성

{
  "compilerOptions": {
    "target": "es6" 
    "module": "commonjs" 
    "lib": [
      "es5",
      "es6",
      "dom"
    ]
    "declaration": true 
    "outDir": "dist" 
    "strict": true
  }
}

 

 

package.json 변경

 

{
  "name": "greenbricks-sdk",
  "version": "2.2.2",
  "type": "module",
  "main": "dist/index.js",
  "scripts": {
    "prepack": "yarn build",
    "build": "yarn clean && yarn build:tsc && yarn build:js",
    "build:tsc": "yarn tsc --emitDeclarationOnly",
    "build:js": "node build.js",
    "clean": "rm -rf dist"
  },
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.js",
      "require": "./dist/index.cjs"
    }
  },
  "license": "MIT",
  "devDependencies": {
    "@types/node": "^20.8.7",
    "esbuild": "^0.19.5",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2"
  },
  "dependencies": {
    "axios": "^1.5.1"
  }
}

yarn build하면 자동으로 dist에 파일 생성 ESM,CJS 지원 

 

esbuild설정

yarn add esbuild -D

npm version patch 통해 버전 올린후 

npm publish 배포

 

https://www.npmjs.com/package/greenbricks-sdk

greenbricks-sdk

 

캐싱최신화

curl -X PURGE "https://cdn.jsdelivr.net/npm/greenbricks-cps-sdk@latest/dist/greenbricks-cps-sdk.iife.js"