React.JS에서 NPM 패키지 만들기

이 글에서는 React.js 애플리케이션용 npm 패키지를 생성하고 게시하는 과정을 안내하겠습니다.

먼저 다음 명령을 실행하세요.

npx create-react-library react-loader

이렇게 하면 기본 React.js 애플리케이션/패키지가 생성됩니다. 명령을 실행하면 다음과 같은 프로젝트 구조가 표시됩니다.

src 폴더에 index.js 파일이 있습니다.

index.jsfile에서 직접 라이브러리 구성 요소를 생성하거나, src 폴더에 새 구성 요소 파일을 생성하고 다음과 같이 index.js 파일에서 내보낼 수 있습니다.

구성 요소에 CSS를 사용하는 경우 해당 CSS를 구성 요소 파일로 가져와야 합니다.

다음으로 프로젝트에 dist 폴더가 있으면 삭제하세요. 구성 요소가 올바르게 작동하는지 테스트하려면 example/src 폴더로 이동하세요.

App.js 파일에서 여기에 표시된 대로 구성 요소를 가져옵니다. 이는 이 라이브러리를 다른 프로젝트의 npm 패키지로 포함하는 데 사용하는 것과 동일한 접근 방식입니다.

앱을 실행하려면 다음 명령을 실행하세요.

cd 반응 로더 && npm 시작
CD 반응 로더/예 && npm 시작

라이브러리를 테스트한 후에는 게시할 시간입니다.

프로젝트 저장소를 이미 설정한 경우 최종 변경 사항을 푸시하면 됩니다. 그렇지 않은 경우 새 저장소를 생성하고 변경 사항을 푸시하세요.

또한 프로젝트 루트에 NPM용 .gitignore 파일과 유사한 기능을 하는 .npmignore 파일을 생성해야 합니다. 이는 특정 파일 및 폴더(예: node_modules, .git, .gitignore 등)가 NPM 레지스트리에 게시되는 것을 방지합니다.

변경 사항을 푸시한 후 npm login 명령을 실행하세요. 브라우저에서 NPM을 열라는 메시지가 표시되며, 여기에서 계정에 로그인하거나 계정이 없는 경우 가입할 수 있습니다. 그런 다음 npm 게시를 실행하면 dist 폴더가 package.json 파일에 지정된 버전으로 NPM에 게시됩니다.

패키지가 게시되면 NPM 웹사이트에서 패키지 이름을 검색하거나 프로필을 방문하여 패키지를 볼 수 있으며 여기에 모든 패키지가 나열됩니다.

더 많은 내용을 보려면 팔로우하세요. 여기에서 저를 찾으실 수 있습니다

위 내용은 React.JS에서 NPM 패키지 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!