캘린더 라이브러리 제작기 5 - vite, npm publish

Seuling·2023년 5월 31일

npm 배포 라이브러리 캘린더

캘린더 라이브러리 제작기

목록 보기

5/7

vite, react 로 npm publish 까지해보려면,
간단하게 세개의 파일설정만 해주면 된다!
package.json vite.config.ts tsconfig.json

Vite??

먼저 vite가뭐지 ?

Vite는 프런트엔드 개발 도구입니다. Vue.js의 생성자 Evan You에 의해 개발되었습니다. 그러나 Vue.js만 아니라 React, Preact, LitElement, Vanilla JS 등 다양한 프레임워크 또는 라이브러리와 호환됩니다.

Vite 특징

vite 특징은 뭔데??

개발 환경에서는 모듈 핫 리로딩을 지원합니다. 즉, 코드를 수정하면 브라우저가 자동으로 해당 모듈만을 새로고침하여 변경사항을 반영합니다. 이는 전체 페이지를 새로고침하는 것보다 빠르고 효율적입니다.

프로덕션 환경에서는 Rollup을 사용하여 코드를 번들링합니다. 이는 코드를 최적화하고, 브라우저 호환성을 보장하며, 코드를 더 효율적으로 불러오는 데 도움이 됩니다.

Rollup 번들링

Rollup을 사용하여 번들링한다..!

번들링

번들링?
여러 개의 파일과 의존성을 하나 또는 몇 개의 파일로 결합하는 과정

번들링의 필요성? 왜하는거지?

네트워크 요청 최소화: 웹 페이지를 로딩할 때, 웹 브라우저는 필요한 각 파일에 대해 별도의 네트워크 요청을 보낸다.
각 네트워크 요청은 오버헤드를 발생시키므로, 가능한 한 요청 수를 줄이는 것이 중요하다. 여러 파일을 하나로 결합함으로써 네트워크 요청 수를 줄일 수 있다.
의존성 관리: 대형 프로젝트에서는 수백 개의 JavaScript 파일이 있을 수 있으며, 이 파일들은 복잡한 의존성 관계를 가질 수 있다. 번들링 도구를 사용하면 이러한 의존성을 자동으로 관리할 수 있다.
최적화: 번들링 도구는 코드를 압축하고, 불필요한 코드를 제거하는 트리 쉐이킹(tree shaking) 기능 등을 제공하여 코드를 최적화한다.
변환: 번들링 도구는 ES6+, TypeScript, JSX 등의 최신 JavaScript 문법을 일반적으로 브라우저에서 지원하는 JavaScript 문법으로 변환하는 역할도 한다.

번들링에는 크게 웹팩과 롤업 두가지 방식이있다.

웹팩

웹팩 ??

Webpack: 웹팩은 가장 널리 사용되는 모듈 번들러 중 하나로, 주로 복잡한 웹 애플리케이션을 위해 설계되었다. 웹팩은 모듈 번들링뿐만 아니라, 코드를 분할하거나 로더를 통해 다양한 파일 타입을 처리하는 등 많은 기능을 제공한다. 또한 웹팩은 플러그인 시스템을 통해 기능을 확장할 수 있다. 웹팩은 대형 프로젝트에 적합하며, 세부적인 구성을 필요로 한다.

롤업

Rollup: 롤업은 라이브러리와 프레임워크를 위해 설계된 모듈 번들러이다. 롤업의 주요 목적은 작고 효율적인 JavaScript 라이브러리를 만드는 것이다. 롤업은 트리 쉐이킹(tree shaking) 기능을 지원하여 불필요한 코드를 제거하고, ESM(ES6 모듈)을 지원하여 좀 더 효율적인 번들링이 가능하다. 롤업은 간단하고 빠른 설정을 제공하지만, 웹팩만큼 다양한 기능을 제공하지 않는다.

하지만, 나는 라이브러리를 만들것이기에 Rollup이 더 목적에 맞다고 판단되었다. 그럼에도 view 먼저 그려보고자, vite로 프로젝트를 먼저 쉽게 시작해보았는데, vite 또한 rollup으로 번들링을 한다고하니, 한번에 vite로 해야겠다라고 결정했다!

그럼 이제 vite의 publish 를위한 설정을 보자!

package.json

{
  // 라이브러리 이름
  "name": "react-check-in-out-calendar-core",
  // 패키지 번호
  "version": "0.0.10",
  // 패키지 설명
  "description": "A core library for creating calendars with check-in and check-out functionality in React.",
  // import, export 사용하는 ECMAScript 모듈
  "type": "module",
  // 라이센스
  "license": "MIT",
  // 패키지에 등록될 키워드들
  "keywords": [
    "calendar",
    "core",
    "check-in",
    "check-out",
    "date-picker",
    "react"
  ],
  // 패키지 연결 레파지토리!
  "repository": {
    "type": "git",
    "url": "https://github.com/sgsg9447/react-check-in-out-calendar-core"
  },
  // 진입점
  "main": "dist/index.js",
  // 타입 파일
  "types": "dist/index.d.ts",
  // build하고 어떤파일 생성할건지
  "files": [
    "dist"
  ],
  ----------------------------------------------------------
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build --base=./", //경로 문제때문에 추가해줌
    "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
// 리액트에서만 돌아가는 프로젝트임을 명시
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

  "dependencies": {
    "dayjs": "^1.11.8",
    "vite-plugin-dts": "^2.3.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.37",
    "@types/react-dom": "^18.0.11",
    "@typescript-eslint/eslint-plugin": "^5.59.0",
    "@typescript-eslint/parser": "^5.59.0",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "typescript": "^5.0.2",
    "vite": "^4.3.9",
    "vite-plugin-libcss": "^1.0.6"
  }
}

"type": "module"
: 작성하지 않는다면, 기본적으로 Node.js는 CommonJS를 사용하는 모듈 시스템을 가정한. CommonJS는 require 및 module.exports를 사용하여 모듈을 로드하고 내보내는 방식이다.

tsconfig.json

{
  "compilerOptions": {
    // JavaScript 코드의 ECMAScript 버전을 설정하는 옵션 (가장 최신)
    "target": "ESNext",
     // TypeScript가 어떤 내장 API(예: Array.map, Promise 등)와 전역 객체(예: document, console 등)를 인식해야 하는지를 결정
    "lib": ["ESNext", "DOM", "DOM.Iterable"],
    //JavaScript 모듈을 생성
    "module": "ESNext",
    // Node.js의 모듈 해석 알고리즘 사용
    "moduleResolution": "node",
    // 컴파일된 JavaScript 파일들이 저장될 디렉토리를 설정
    "outDir": "dist",
    // 모든 파일을 분리된 모듈로서 처리하게 함
    "isolatedModules": true,
    // 컴파일을 실행하지만 JavaScript 출력을 제거함
    "noEmit": false,
    // : JSX 코드의 컴파일 방식을 설정합니다
    "jsx": "react-jsx",
    //  모든 엄격한 타입 검사 옵션을 활성화함
    "strict": true,
    // 사용되지 않는 변수에 대해 에러를 발생 시킴
    "noUnusedLocals": true,
    // 사용되지 않는 함수 매개변수에 대해 에러를 발생
    "noUnusedParameters": true,
    // switch 문의 case가 break나 return 등으로 종료되지 않으면 에러를 발생 시킴
    "noFallthroughCasesInSwitch": true,
    // TypeScript가 .d.ts 타입 선언 파일을 생성하도록 함
    "declaration": true,
    //  .d.ts 파일에 대한 소스 맵을 생성하도록 함
    "declarationMap": true,
    // 컴파일된 JavaScript 파일에 대한 소스 맵을 생성하도록 함
    "sourceMap": true,
    // CommonJS와 ES 모듈 사이의 상호 운용성을 위한 코드를 생성하도록 함
    "esModuleInterop": true,
    // 대소문자가 다르게 사용된 파일 이름에 대해 에러를 발생 시킴
    "forceConsistentCasingInFileNames": true
  },
   // 컴파일 대상 파일들을 설정함
  "include": ["src"],
  //  프로젝트 참조 설정을 위한 경로를 설정함
  "references": [{ "path": "./tsconfig.node.json" }]
}

soureceMap ?:변환된 파일(예: minified 혹은 컴파일된 파일)과 원본 소스 파일 간의 매핑을 제공함

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { fileURLToPath } from "url";
import { dirname, resolve } from "path";
import dts from "vite-plugin-dts";
import libCss from "vite-plugin-libcss";

// 현재 파일의 디렉토리 경로를 가져오기
const __dirname = dirname(fileURLToPath(import.meta.url));
// Vite 설정을 정의하고 내보냄 
export default defineConfig({
  // Vite에서 사용할 플러그인 정의
  // dts() : 타입스크립트 .d.ts 도와줌
  // libCss() : css 파일 매핑 도와줌
  plugins: [react(), dts(), libCss()],

  //빌드 옵션을 정의
  build: {
    // 라이브러리 모드로 빌드하는 데 필요한 설정을 정의
    lib: {
      // 진입점
      entry: resolve(__dirname, "src/index.ts"),
      // 라이브러리 이름
      name: "react-check-in-out-calendar",
      // 파일 이름
      fileName: "index",
      // 어떤 모듈형태로 빌드할건지 : es, umd, cjs
      formats: ["es", "umd", "cjs"],
    },
    // Rollup에 전달될 추가 옵션을 정의
    rollupOptions: {
      // 빌드 과정에서 외부로 처리될 패키지를 명시
      external: ["react", "react-dom"],
      // 빌드 결과물의 출력 옵션을 설정
      output: {
        globals: {
          react: "React",
          "react-dom": "ReactDOM",
        },
        assetFileNames: "styles/[name].[ext]",
      },
    },
  },
});