티스토리 뷰
반응형
타 마케팅 개발가이드를 보며 라이브러리 설치하여 고객사쪽에서 트래킹하는 함수를 만들어 보기위해 테스트를 진행하였다. 이번기회로 여러 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
Latest version: 2.2.2, last published: 4 hours ago. Start using greenbricks-sdk in your project by running `npm i greenbricks-sdk`. There are no other projects in the npm registry using greenbricks-sdk.
www.npmjs.com
캐싱최신화
curl -X PURGE "https://cdn.jsdelivr.net/npm/greenbricks-cps-sdk@latest/dist/greenbricks-cps-sdk.iife.js"
반응형
'개발' 카테고리의 다른 글
[함수형프로그래밍] 값의부재와 순수함수 (0) | 2024.02.12 |
---|---|
[python] FastApi / uvicron 세팅 (0) | 2024.02.11 |
[React] Redux / Recoil 상태관리 차이점과 특징 (0) | 2023.09.29 |
[GIT] Git hook을 도와주는 Husky & Prettier setting (0) | 2023.09.19 |
[linux] 리눅스 우분투(ubuntu) 아파치(apache) CSR생성후 SSL적용 (1) | 2023.08.16 |
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 윈도우pscale설치
- next.js
- kubectl
- semi-supervised
- 42서울
- 우테코
- SSR
- 타입스크립트
- asyncio.gather
- iris
- un-supervised
- create_task
- Tailwind
- CloudFlare
- planetscale배포
- pscale
- nodejs
- 비동기
- datalabeling
- 대수자료구조
- 위즈윅에디터
- asyncio
- helm
- Python
- window
- nextj이미지저장
- 함수형프로그래밍
- k8s
- supervised
- ADT
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
글 보관함