안녕하세요 여러분 👋 저는 Fatih입니다. 저는 터키에서 온 프런트 엔드 개발자이고 이것은 제가 2일 전에 npm에 게시한 첫 반응 네이티브 라이브러리에 대한 첫 번째 게시물입니다.

먼저 살펴보고 싶다면 다음과 같이 하세요.
NPM
GitHub Repo

전화번호 입력을 위한 국가 전화 접속 코드를 선택할 수 있는 드롭다운 구성 요소입니다.

그렇게 전문 프론트엔드 개발자로 일하기 시작한지 ​​5개월이 되었습니다. 주로 React로 작업하지만 React Native 개발은 비교적 새롭습니다. firebase로 OTP 로그인 작업을 하다가 전화번호 입력을 구축했습니다. 모든 것이 괜찮았지만 국가 코드 선택기가 누락되었습니다. 그래서 드롭다운/선택기 패키지를 확인했지만 사용자 정의할 수 없고 내 마음 속에 나만의 디자인이 있었기 때문에 직접 만들기로 결정했습니다. 결국 저는 플래그와 모든 것이 포함된 검색 가능한 멋진 국가 코드 선택기를 만들었고 상사는 그것을 매우 좋아했으며 NPM에 게시해야 한다고 제안했습니다.

그것을 이루기 위해 약간의 조사를 하고 패키지를 만들고 출판하는 것에 대해 많은 것을 배운 과정이었습니다. 그래서 저는 이 단계를 커뮤니티와 공유하기로 결정했습니다.

프로젝트 초기화

TypeScript를 사용하여 React Native 베어 워크플로 프로젝트를 초기화합니다.
npx react-native init AwesomeTSProject --template react-native-template-typescript

종속성 및 package.json 구성

가장 중요한 것은 package.json을 올바르게 가져오는 것입니다. 여기에는 곧 출시될 패키지에 대한 모든 필수 정보가 포함되어 있습니다. 이제 아래 정보를 복사하여 붙여넣지 말고 package.json을 살펴보고 그에 따라 필드를 편집/추가하십시오.

{
  "name": "@digieggs-rn-country-code-picker", // Your package's name
  "version": "1.0.0", // Keep it 1.0.0 for now. It will increase automatically when you patch the project
  "main": "lib/module/index.js", // Entry point of the package
  "module": "lib/module/index.js", // Entry point of the package
  "react-native": "src/index.ts", // Entry point of the project
  "types": "lib/typescript/index.d.ts", // Entry point of the type definitions
  "description": "A searchable dropdown component to select a country code for your phone number input.", // Description to show on npmjs.com
  "files": [
    "lib/",
    "src/"
  ], // Entry point of the necessary files
  "keywords": [
    "react-native",
    "country",
    "country-code",
    "dialing code",
    "picker",
    "mobile",
    "ios",
    "android"
  ], // Some keywords to make the package easier to be found
  "bugs": {
    "url": "https://github.com/DIGIEGGS/rn-country-code-picker/issues"
  },
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "prepare": "bob build" // The command to build our package's core
  },
  "dependencies": {
    "react": "16.13.1",
    "react-native": "0.63.3",
    "react-native-svg": "^12.1.0"
  },
  "devDependencies": {
    ...
    "@react-native-community/bob": "^0.16.2", // The builder. I'll talk about it
  },
  "peerDependencies": { // Add the dependencies that you want the user to install manually here. In my case it react-native-svg for the icons in the component
    "react-native-svg": "^12.1.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/DIGIEGGS/rn-country-code-picker"
  }, // repository info to show on npmjs.com
  "author": "Fatih Can <[email protected]>", // author info to show on npmjs.com
  "license": "MIT", // license info,
  "@react-native-community/bob": {
    "source": "src",
    "output": "lib",
    "targets": [
      "module",
      "typescript"
    ]
  } // Config for the builder bob
}

package.json 작업을 완료한 후 yarn 또는 npm을 사용하여 종속 항목을 설치해 보겠습니다.
yarn 또는 npm install
여기서 가장 중요한 종속성은 다음과 같습니다.

호출 스택 / 반응 네이티브 빌더 밥

👷‍♂️ 다양한 타겟을 위한 React Native 라이브러리를 스캐폴딩하고 빌드하기 위한 간단한 CLI 세트

이 라이브러리는 ts 파일을 js 파일로 컴파일하고 구성 요소의 유형 정의를 lib 폴더에 빌드합니다.

TypeScript 구성

그런 다음 tsconfig.json으로 이동합니다. 원하는 경우 복사/붙여넣기할 수 있습니다.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true
  },
  "include": ["src/index.ts"],
  "exclude": ["node_modules", "babel.config.js", "metro.config.js", "jest.config.js"]
}

소스 폴더 및 필요한 파일

그런 다음 src 폴더를 만들어 봅시다. 이 폴더에는 패키지 소스가 포함됩니다.



그런 다음 index.ts 파일을 만들고 다음과 같이 기본 구성 요소를 내보냅니다.

export { default as CallingCodePicker } from './CallingCodePicker';

거의 끝났습니다. 필요한 무시 파일을 만들고 패키지를 빌드하겠습니다.

.gitignore

...

# generated files by bob
lib/

.eslintignore

node_modules/

# generated files by bob
lib/

.npmignore

tsconfig.json
src

# Logs
*.log
npm-debug.log

# Dependency directory
node_modules

# Runtime data
tmp

라이브러리 구축

이제 다음 명령을 실행하여 bob으로 패키지를 빌드해 보겠습니다.
yarn run prepare
다음 로그가 표시되면 패키지를 테스트할 준비가 된 것입니다.

테스트

다음 명령을 실행합니다.
npm pack
builder-bob은 프로젝트를 .tgz 파일로 압축하여 yarn/npm으로 다른 프로젝트에 설치하여 성공적으로 설치되었는지 확인할 수 있습니다.

이제 구조에 .tgz 파일이 표시되어야 합니다. 데스크톱으로 이동하고 다른 React Native 프로젝트를 초기화합니다. 알아요... 🥱 참아주세요 👊

해당 프로젝트가 초기화된 후 .tgz 파일의 경로로 다음 경로를 변경하고 실행합니다.
npm install C:\Users\digieggs\Desktop\digieggs-rn-country-code-picker-1.0.4.tgz또는yarn add C:\Users\digieggs\Desktop\digieggs-rn-country-code-picker-1.0.4.tgz
성공적으로 설치한 후 다음과 같이 구성 요소를 가져올 수 있습니다.
import { CallingCodePicker } from '@digieggs/rn-country-code-picker'

GitHub 구성

모든 사람과 코드를 공유하고 프로젝트를 유지하려면 GitHub 저장소가 필요합니다. 적절한 이름으로 다음 명령을 실행합니다.

git init
git add .
git commit -m “Initial commit”
git remote add origin https://github.com/<username>/<package_name>.git
git push -u origin master

package.json에서 repository 및 bugs 섹션을 편집하는 것을 잊지 마십시오.

NPM에 게시

그런 다음 패키지를 게시할 준비가 되었습니다. 다음 명령을 실행하여 사용자를 정의합니다. 사용자 이름, 비밀번호 및 이메일을 묻습니다.
npm adduser
게시 명령을 실행하기 전에 이메일 주소를 확인하십시오.
npm publish
그리고 축하합니다! 🥳 패키지는 라이브 상태이며 다음 명령을 사용하여 어디에서나 설치할 수 있습니다.
npm install <package_name>또는yarn add <package_name>

결론

첫 번째 npm 패키지를 빌드했습니다. 패키지 게시가 어려워 보일 수 있지만 그렇지 않습니다. 명확한 가이드가 되었기를 바랍니다. 첫 번째 튜토리얼 블로그 게시물입니다. 막힌 곳이 있으면 언제든지 질문하십시오.