프로젝트 개발을 하면서 우리는 패키지를 다운받는다. 패키지들은 각 언어에 따라 패키지 매니저에서 관리되고. 노드의 대표적인 패키지 매니저는 NPM이다.

디자인 시스템을 만들면서, 다른 사람들도 다운받아 사용할 수 있도록 NPM에 배포할 예정이다. 현재까지 작업된 배포 과정을 알아보자.

먼저 우리는 코드 전체 아닌, 빌드 파일들을 배포할 것이다. 그래서 빌드 설정부터 건드려보자.

Vite, React로 개발 환경을 구축하여 Vite를 통해 빌드 설정을 건드릴 수 있다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// <https://vite.dev/config/>
export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist',
    emptyOutDir: false,
    lib: {
      entry: 'src/index.ts',
      name: 'gdg-kuds',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

여기서 주의깊게 볼 점은 formats 필드이다. fileName 에서 사용되는 format이 이 배열값들을 참조하여 준다.

요즘 React 개발을 하면서 cjs 쓰는 곳이 있을까…? 싶긴 한데 그냥 혹시나 해서 넣어놓긴 했다.

자 이제 빌드를 해보면 우리가 원하는 파일들 뿐만 아니라 원하지 않는 파일들 또한 들어간다. ex) *.stories.d.ts , *.test.d.ts

그래서 tsconfig.json 의 exclude 필드에 위 둘을 추가하자.

{
	// ...
	"exclude": ["**/*.stories.tsx", "**/*.test.tsx"],
	// ...
}

그 후 빌드를 하면 저 두 종류의 파일들이 나오지 않는다.

그리고 우리는 package.json 파일도 수정을 해야한다.

{
	// ...
  "main": "dist/index.cjs.js",
  "module": "dist/index.es.js",
  "types": "dist/index.d.ts",
  "type": "module",
	"files": [
    "dist"
  ],
}

일단 나는 이 정도만 넣어놨다. 사용하는 프로젝트의 타입이 esm, cjs일 때를 구분하여 주었으며, 요즘 안하면 욕먹는다는 타입 선언을 위해 index.d.ts 파일도 넣어주었다.