목표
지금까지 만든 Broadcast 모듈을 별도의 레포로 분리시켜 Copy Stack의 관심사에서 제거하려고 합니다.
세팅 등의 내용은 건너 띄고 tsconfig,vite,package.json 세팅만 간단하게 봅시다.
tsconfig.json
{
"compolerOptions": {
...
"declaration":true,
"declarationMap":true,
"outDir":"dist"
...
}
}declaration, declarationMap, outDir를 설정해줍니다. 자세한 내용은 링크 참조
vite.config.ts
먼저 typescript로 작성된 npm 패키지이기 때문에 d.ts 파일을 빌드할 수 있게 만들어야합니다. vite에서 d.ts 파일을 생성하도록 만드는 패키지를 설치합니다.
https://www.npmjs.com/package/vite-plugin-dts
npm i -D vite-plugin-dts다음 vite.config.ts 파일에 아래와 같이 내용을 추가합니다.
import { resolve } from "path";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
export default defineConfig({
resolve: {
alias: {
"@": resolve(__dirname, "src"),
},
},
build: {
lib: {
entry: resolve(__dirname, "src/index.ts"),
name: "broadcasting",
fileName: "index",
formats: ["es", "cjs"],
},
},
plugins: [dts()],
});plugins 옵션을 먼저 봅시다. 방금 설치한 dts를 플러그인으로 추가합니다.
다음 build 옵션에서 es,cjs 포멧을 지원하고 index파일을 통해 불러오도록 했습니다.
빌드 결과
index.cjs, index.js 파일이 생겼으며, 각각의 파일들에 대한 .d.ts 파일이 생긴 것을 볼 수 있습니다.
name의 경우 broadcast라는 npm 패키지가 이미 있어서 broadcasting이라는 이름으로 바꿨습니다.
package.json
exports,types 그리고 files 옵션을 추가했습니다.
"name": "broadcasting", // 이름 broadcasting으로 변경함
"private":false // false여야 나중에 publishing 가능
...
"exports": {
".": {
"import": "./dist/index.js",
"require": "./dist/index.cjs"
}
},
"types": "./dist/index.d.ts",
"files": [
"dist/**"
],exports는 require를 사용하는 경우, import 를 사용하는 경우 불러올 파일을 지정하는 옵션이고
types 옵션은 모듈을 불러온 다른 타입스크립트 프로젝트에서 쓸 수 있게 타입을 알려주는 역할입니다. .d.ts 파일을 알려주면 됩니다.
files 옵션은 pushling할 때 업로드할 파일들을 알려주는 역할입니다. "dist"만 입력하면 안되고 "dist/**"로 해야 dist에 있는 파일이 전부 올라갑니다.
npm link로 모듈 테스트
npm link를 통해 copy stack에서 잘 동작하는지 확인합니다.
npm link는 로컬 모듈을 다른 프로젝트에서 import하여 사용할 수 있도록 symbolic link를 만들어주는 역할을 합니다. 즉, copy stack 프로젝트에서 로컬에 존재하는 broadcasting 모듈을 import 하는 방법입니다.
버전올리기
0.0.0 버전은 퍼블리싱이 안되니 package.json에서 1.0.0 버전으로 버전을 변경합니다.
심볼릭 링크 생성
먼저 broadcast 저장소에서 npm link를 통해 심볼릭 링크를 만들어줍니다.
// broadcasting 폴더
npm link이제 npm list -g 명령으로 심볼릭 링크가 생성되었는지 확인합니다.
copy-stack 저장소로 와서 npm link broadcast 를 해줍니다.
broadcasting@0.0.0이 추가된 것을 볼 수 있습니다.
링크 불러오기
copy-stack 프로젝트로 돌아와서
npm install
npm link broadcasting을 해줍니다.
그렇게 되면 node_modules에 아래 사진처럼
broadcasting이 추가됩니다. 심볼릭 링크라 오른쪽에 엔터 표시가 보입니다.
이제 아래처럼 broadcasting을 불러와 사용할 수 있습니다.
링크 끊기
copy-stack 폴더에서 아래와 같이 입력해 연결을 끊습니다.
npm unlink --no-save broadcasting
npm uninstall --no-save broadcastingnpm uninstall broadcasting으로 연결을 끊고 global 옵션으로 저장되는 node_modules 폴더에서 심볼릭 링크를 지웁니다.
저의 경우 C:\Program Files\nodejs\node_modules에 위치했습니다.
퍼블리싱하기
npm link를 통해 불러와 사용해보니 문제가 없으므로 broadcast (이제 broadcasting)을 퍼블리싱합니다.
npm login
npm login
one-time password는 입력한 이메일로 보내주는데 그걸 입력하면 됩니다.
npm publish
다음 npm publish 해주면 모듈의 퍼블리싱이 완료됩니다.
나중에 README를 채워야겠군요.
실제로 사용하기
이제 npm i broadcasting으로 불러와 사용해봅시다.
broadcasting이 설치되었습니다.
import도 문제 없이 동작하고
"broadcasting"을 읽어 사용하는 테스트도 잘 동작합니다.
굿
