React, TypeScript 및 CSS 모듈을 사용하여 효율적인 npm 패키지 구축: 종합 가이드

재사용 가능한 npm 패키지를 만들면 개발 프로세스를 더욱 효율적이고 즐겁게 만들 수 있습니다. 이 글에서는 React, TypeScript, CSS 모듈 및 기타 도구를 사용하여 현대적이고 강력한 프로젝트 설정을 만드는 과정을 안내합니다.

시작하기 전에 여기에서 소스 코드를 찾을 수 있습니다. https://github.com/helgastogova/npm-react-typescript-template . 이 저장소는 React 및 TypeScript를 사용하여 npm 패키지를 생성하기 위한 기반 역할을 합니다. 최신 개발 워크플로를 위한 빌드 프로세스와 권장 패키지 세트로 사전 구성되어 있습니다.

주요 기능은 다음과 같습니다.

1. React & TypeScript : 강력한 유형 안전성과 우수한 개발자 경험을 갖춘 최신 UI 개발.
2. CSS 모듈 : 구성요소를 분리하여 스타일을 지정하고 CSS 충돌을 방지하며 모듈식 디자인을 활성화합니다.
3. ESLint : JavaScript 및 React의 모범 사례를 준수하여 코드 품질을 보장합니다.
4. 롤업 : 배포를 위해 React 및 TypeScript 코드를 단일 파일로 효율적으로 묶습니다.
5. PostCSS : 차세대 CSS 기능을 활용하고 브라우저 호환성을 처리합니다.
6. 크기 제한 : 라이브러리 크기를 모니터링하고 실수로 크기가 커지는 것을 방지합니다.

각 도구를 좀 더 포괄적으로 살펴보겠습니다.

CSS 모듈

CSS 모듈은 스타일링 혼란의 영역에서 안전의 신호 역할을 합니다. 스타일에 대한 로컬 범위 지정을 구현하여 충돌 및 중복 문제를 방지합니다. 각 CSS 모듈은 구성 요소에 "캡슐화"되어 정의한 스타일이 누출되어 의도치 않게 다른 요소에 영향을 주지 않도록 보장합니다.

CSS 모듈을 사용하는 다음 간단한 구성 요소를 고려해보세요.

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

그리고 관련 CSS 모듈은 다음과 같습니다.

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

이 경우 TestComponent.module.css 의 .root 클래스는 다른 모듈의 다른 .root 클래스에 영향을 주지 않습니다.

ESLint

ESLint 는 소란스러운 코드의 바다를 안내하는 등대와 같습니다. 이는 코드 품질을 유지하고, 오류를 포착하고, 문제가 발생하기 전에 모범적인 코딩 방법을 시행하는 데 도움이 됩니다.

package.json 에는 다음이 있습니다.

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

npm run lint 로 린터를 실행합니다. ESLint는 TypeScript 파일을 검사하고 잠재적인 문제에 대해 경고합니다. 이는 작은 오류나 불일치가 발생하기 쉬운 대규모 코드베이스에 특히 유용합니다.

롤업

Rollup 은 코드의 개인 피트니스 트레이너입니다. JavaScript, TypeScript 및 CSS를 가져와 배포할 준비가 된 간결하고 효율적인 하나의 패키지로 묶습니다.

가볍고 빠르지만 진정한 이점은 "나무 흔들기" 기능에서 비롯됩니다. 롤업은 최종 번들에서 사용되지 않는 코드를 제거하여 패키지를 최대한 간결하게 만듭니다. 롤업 구성의 예는 다음과 같습니다.

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

포스트CSS

PostCSS 는 시간여행자와 같아서 미래의 구문과 기능을 사용하여 CSS를 작성할 수 있습니다. 그런 다음 시간을 거슬러 올라가 이러한 현대적인 스타일을 오래된 브라우저도 이해할 수 있는 코드로 변환합니다.

위의 롤업 구성에서 PostCSS가 작동하는 것을 볼 수 있습니다. rollup-plugin-postcss 사용하면 최신 CSS가 변환되어 최종 번들에 포함됩니다. 이것의 장점은 브라우저 호환성에 대한 걱정 없이 최신 기능을 사용하여 CSS를 작성할 수 있다는 것입니다.

크기 제한

Size Limit 은 도서관이 너무 부풀어 오르지 않도록 항상 경계하는 감시자입니다. 사용자가 다운로드할 JavaScript와 CSS를 모두 추가하여 라이브러리의 실제 비용을 계산합니다. 이는 번들 크기를 확인하는 데 도움이 되는 귀중한 도구입니다.

package.json 에서:

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

그런 다음 npm run size 실행하여 번들 크기를 확인할 수 있습니다. 설정한 제한(이 경우 10KB)을 초과하면 스크립트에서 오류가 발생합니다. 이는 사용자의 다운로드 시간이 무의식적으로 늘어나는 것을 방지할 수 있는 좋은 방법입니다.

설정

이 템플릿을 사용하려면 저장소를 복제하세요.

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

다음 디렉터리로 이동합니다.

 cd npm-react-typescript-template

종속성을 설치합니다.

 npm install

이제 패키지 개발을 시작할 준비가 되었습니다! 진입점은 src/index.tsx 입니다.

패키지 구축

자체 구성 요소를 만든 후 배포용 패키지를 빌드할 준비가 되면 다음을 실행하세요.

 npm run build

빌드된 패키지는 npm에 게시할 준비가 된 dist 디렉터리에 있습니다.

npm에 게시

package.json 의 name 필드를 원하는 패키지 이름으로 설정했는지 확인하세요. 또한 새로 게시할 때마다 버전 번호를 업데이트하는 것을 잊지 마세요. 완료되면 다음을 사용하여 npm에 로그인합니다.

 npm login

사용자 이름, 비밀번호, 이메일을 입력하세요. 로그인하면 다음을 사용하여 패키지를 게시할 수 있습니다.

 npm publish

이제 npmjs 라이브러리 에 구성요소를 게시했으며 사람들이 이를 사용할 수 있습니다. 당신은 정말 대단해요!

즐거운 코딩하세요!