大家好👋我是法提赫。我是来自土耳其的前端开发人员,这是我关于 2 天前发布到 npm 的第一个 react 原生库的第一篇文章。

首先,如果你想看看它:

NPM

GitHub 回购

它是一个下拉组件,可让您为电话号码输入选择国家/地区拨入代码。

所以,从我开始成为一名专业的前端开发人员到现在已经 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 <contact@fatihcan.dev>", // 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-builder-bob

👷u200d♂️ 一组简单的 CLI,用于为不同目标构建 React Native 库

该库会将 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 文件夹。这个文件夹将包含我们包的源代码:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--nVOtVv-b--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/pfzw8mhzyhrb28m5l0de.jpg)

之后,创建一个 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

如果您看到以下日志,则表示我们的包已准备好进行测试:

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8EAZClqm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads .s3.amazonaws.com/i/e097ojuqyt3v1srqkl9n.jpg)

测试

运行以下命令:

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 包。发布一个包可能看起来很难,但事实并非如此。我希望这是一个清晰的指南,这是我的第一篇教程博客文章。如果您遇到任何问题,请随时提出问题。