如何将React Native组件发布到NPM-比您想象的要容易

by Colby Miller

通过Colby Miller

如何将React Native组件发布到NPM-比您想象的要容易 (How to publish a React Native component to NPM — it’s easier than you think)

So you want to contribute to the open source community? That’s awesome! Helping to grow React Native’s fairly young ecosystem is great.

您想为开源社区做出贡献吗？ 棒极了！ 帮助发展React Native相当年轻的生态系统很棒。

When I decided to take on this task not long ago, I noticed there wasn’t much material around publishing React Native components to NPM. So I’m hoping this post will help make the process much easier for others.

当我不久前决定承担此任务时，我注意到将React Native组件发布到NPM的内容并不多。 因此，我希望这篇文章可以使其他人的工作变得更加轻松。

Note: All sample code below is from react-native-progress-steps, my very own first NPM package.

注意：以下所有示例代码均来自react-native-progress-steps ，这是我自己的第一个NPM软件包。

Before we get started, make sure to register for an account on NPM. You can do that here.

在开始之前，请确保在NPM上注册一个帐户。 你可以在这里做。

最初设定 (Initial Setup)

First, let’s create a folder where our React Native component will live.

首先，让我们创建一个文件夹，React Native组件将在其中存在。

mkdir <folder_name> && cd <folder_name>

# For example
mkdir my-component && cd my-component

Note: To keep this article brief, I’m assuming you already have Node and NPM installed on your computer. If that’s not the case, take a look at this documentation for help.

注意：为使本文简短，我假设您已经在计算机上安装了Node和NPM。 如果不是这种情况，请查看此文档以获取帮助。

Once inside the folder, we need to initialize a new NPM package by typing npm init. This will create a package.json file that will hold some important metadata about the React Native component.

进入文件夹后，我们需要通过键入npm init初始化一个新的NPM包。 这将创建一个package.json文件，其中将包含一些有关React Native组件的重要元数据。

A series of questions will be displayed such as package name, version, description, keywords, etc.

将显示一系列问题，例如软件包名称，版本，描述，关键字等。

Important: When asked for the entry point, make sure to enter index.js and press enter. This will be the file that exports your main component.

重要提示：当要求输入入口点时 ，请确保输入index.js并按Enter。 这将是导出您的主要组件的文件。

{
  "name": "react-native-progress-steps",
  "version": "1.0.0",
  "description": "A simple and fully customizable React Native component that implements a progress stepper UI.",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/colbymillerdev/react-native-progress-steps.git"
  },
  "keywords": [
    "react-native",
    "react-component",
    "react-native-component",
    "react",
    "react native",
    "mobile",
    "ios",
    "android",
    "ui",
    "stepper",
    "progress",
    "progress-steps"
  ],
  "author": "Colby Miller",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/colbymillerdev/react-native-progress-steps/issues"
  },
  "homepage": "https://github.com/colbymillerdev/react-native-progress-steps#readme"
}

项目结构 (Project Structure)

The next step is setting up a folder structure for your React Native component. This is really up to you, but I’ll share a simple example of mine below:

下一步是为React Native组件设置文件夹结构。 这确实取决于您，但是我将在下面分享我的一个简单示例：

You’ll notice some files that we haven’t created yet. We will be addressing those shortly.

您会注意到一些我们尚未创建的文件。 我们将在短期内解决这些问题。

Let’s create the index.js file. This will be the most important file for properly exporting/importing your component. Navigate to the root project folder and type touch index.js.

让我们创建index.js 文件。 这将是正确导出/导入组件的最重要文件。 导航到根项目文件夹，然后输入touch index.js 。

There are a few different ways of going about the content inside this file.

处理此文件中内容的方式有几种不同的方式。

• Directly writing the component class inside of the index.js file and exporting it there.

  直接在index.js文件中编写组件类并将其导出到那里。

• Creating a separate component JavaScript file and exporting it in index.js.

  创建一个单独的组件JavaScript文件并将其导出到index.js 。

• Lastly, creating many component and container JavaScript files and exporting all the necessary ones in the index.js file. This is the approach I followed and can be seen in the example below.

  最后，创建许多组件和容器JavaScript文件，并将所有必需的文件导出到index.js文件中。 这是我遵循的方法，可以在下面的示例中看到。

import ProgressSteps from './src/ProgressSteps/ProgressSteps';
import ProgressStep from './src/ProgressSteps/ProgressStep';

export { ProgressSteps, ProgressStep };

No matter which approach is taken, what’s exported in this file is what the consuming app will ultimately import and render. That’s the important part to remember.

无论采用哪种方法，此文件中导出的内容都是最终使用的应用程序将导入和呈现的内容。 这是要记住的重要部分。

import { ProgressSteps, ProgressStep } from 'react-native-progress-steps';

依存关系 (Dependencies)

We have to determine what dependencies need to be installed for our React Native component to work properly.

我们必须确定需要安装哪些依赖项才能使React Native组件正常工作。

There are three different types of dependencies:

有三种不同类型的依赖项：

• peerDependencies: These dependencies are required for the component to run; however, they are expected to already be installed on the app. An example of this is react-native itself. However, in React Native’s case it is not necessary to add react-native as a peer dependency.

  peerDependencies：这些依赖关系是组件运行所必需的； 但是，它们应该已经安装在应用程序上。 一个例子就是react-native本身。 但是，在React Native的情况下，没有必要添加react-native作为对等依赖项。

• dependencies: These are also required for the component to run, but you can’t assume the consuming app has these installed. Some examples would be lodash and prop-types .

  依赖项：运行组件也需要这些依赖项 ，但是您不能假定使用该应用程序的用户已经安装了这些依赖项 。 一些例子是lodash和prop-types 。

• devDependencies: These are more straightforward. They are all the packages required to develop the React Native component. Examples of these would be your linter, test framework, and babel.

  devDependencies：这些更为直接。 它们是开发React Native组件所需的所有软件包。 这些示例包括您的linter，测试框架和babel。

安装Babel依赖项 (Installing Babel Dependency)

Our next step is to hook our component up to Babel. We can simply do this by installing the following dev dependency:

我们的下一步是将我们的组件连接到Babel。 我们可以简单地通过安装以下dev依赖项来做到这一点：

npm install metro-react-native-babel-preset --save-dev

After the installation is complete, we need to create a .babelrc file and add the following to it:

安装完成后，我们需要创建一个.babelrc文件，并在其中添加以下内容：

{
  "presets": ["module:metro-react-native-babel-preset"]
}

创建.gitignore和.npmignore (Creating .gitignore and .npmignore)

One of the final steps is to create the standard .gitignore and .npmignore files as a best practice. This will also avoid any issues when publishing to NPM.

最后的步骤之一是创建标准的.gitignore和.npmignore文件，这是最佳做法。 当发布到NPM时，这也将避免任何问题。

测试中 (Testing)

Normally, it’s relatively straightforward to link and install our package locally to apps, without having to publish to NPM first.

通常，将包本地链接并安装到应用程序相对简单，而不必先发布到NPM。

This would be done by using the npm link command inside of our packages root directory. Then, navigating to an app and typing npm link <package-name> then npm install .

这可以通过在软件包根目录中使用npm link命令来完成。 然后，导航至应用程序并输入npm link <package-na me>， then npm i nstall。

However, at the time of writing this article, React Native and the npm link command don’t work nicely together.

但是，在撰写本文时，React Native和npm link命令不能很好地协同工作。

There are two solutions I’ve found so far that solve this issue:

到目前为止，有两种解决方案可以解决此问题：

1.使用本地路径在应用程序中安装软件包 (1. Installing the package in an application using local path)

To do this, navigate to an app and directly install your package there using its directory path.

为此，请导航至应用程序，然后使用其目录路径直接在其中安装软件包。

npm i <path_to_project>

# For example
npm i ../my-component

After making any changes to your package, you’ll have to revisit the app and re-install. This is not an ideal solution, but it is one that works.

对软件包进行任何更改后，您必须重新访问该应用程序并重新安装。 这不是理想的解决方案，但它是可行的。

2.创建一个Examples文件夹并使用npm pack (2. Creating an Examples folder and using npm pack)

The npm pack command is a great way to quickly package up your React Native component and have it ready for testing. It creates a .tgz file that can then be installed into an already existing application.

npm pack命令是一种快速打包React Native组件并使其准备好进行测试的好方法。 它创建一个.tgz文件，然后可以将其安装到现有的应用程序中。

Let’s create a /examples folder inside of our NPM package’s root directory. This folder will essentially be its own React Native application that runs and displays your examples.

让我们在NPM包的根目录内创建一个/examples文件夹。 该文件夹实际上将是其自己的React Native应用程序，该应用程序将运行并显示您的示例。

This can be done by creating a React Native project using react-native init examples.

这可以通过使用react-native init examples创建一个React Native项目来完成。

Note: This requires having React Native already installed on your computer. You can follow the Facebook guide here.

注意：这需要在您的计算机上已经安装React Native。 您可以在此处按照Facebook指南进行操作。

After that is finished, run the npm pack command to generate a file that will have a naming convention similar to package-name-0.0.0.tgz.

完成之后，运行npm pack命令生成一个文件，该文件的命名约定类似于package-name-0.0.0.tgz 。

Then, go into the /examples folder and install your component by running npm i ../package-name-0.0.0.tgz or yarn add ../package-name-0.0.0.tgz in the terminal. Remember to replace package-name and 0.0.0 respectively.

然后，进入/examples文件夹并通过运行npm i ../package-name-0.0.0.tgz或在终端中yarn add ../package-name-0.0.0.tgz来安装组件。 请记住分别替换package-name和0.0.0 。

Create a JavaScript file or files that will display your component. For this example, we will call this ExampleOne.js. It’s important to point out that you should be importing the component that you just installed using yarn or npm in this file.

创建一个或多个将显示您的组件JavaScript文件。 对于此示例，我们将其称为ExampleOne.js 。 重要的是要指出，您应该在此文件中使用yarn或npm导入刚安装的组件。

Once the file is created, open App.js and import/export the example file. Whatever is exported in this file is what will be displayed when running the project on a simulator or device.

创建文件后，打开App.js并导入/导出示例文件。 在此文件中导出的内容都是在模拟器或设备上运行项目时显示的内容。

import ExampleOne from './ExampleOne'

export default ExampleOne;

Finally, we can run the application using react-native run-ios or react-native run-android. We should now be able to see our component and properly test it.

最后，我们可以使用react-native run-ios或react-native run-android来运行应用程序。 现在，我们应该能够看到我们的组件并对其进行适当的测试。

After making any changes to your NPM packages code, remember to run the npm pack command, then go into the /examples folder to npm install or yarn add the .tgz file.

对NPM软件包代码进行任何更改后，请记住运行npm pack命令，然后进入/examples文件夹以进行npm install或yarn add .tgz文件。

A cool benefit of this option is the ability for other users to run your examples on a simulator or device. This allows them to try out your component without having to import it into their own application first. Also, the .tgz file can be easily shared among coworkers, friends, etc.

此选项的一个很酷的好处是其他用户可以在模拟器或设备上运行您的示例。 这使他们可以试用您的组件，而不必先将其导入到自己的应用程序中。 此外， .tgz文件可以在同事，朋友等之间轻松共享。

发布到NPM (Publishing To NPM)

Finally, we are ready to share our React Native component with the awesome open source community!

最后，我们准备与令人敬畏的开源社区共享我们的React Native组件！

Publishing is very quick and easy. Just log into your NPM account from the terminal using npm login then publish using npm publish .

发布是非常快速和容易的。 只需使用npm login从终端npm login NPM帐户，然后使用npm publish 。

One thing to remember is NPM requires us to increment the version in package.json each time before publishing.

要记住的一件事是NPM要求我们在发布之前每次都增加package.json的版本。

结论 (Conclusion)

We have covered a ton of material in this post. If you run into any issues feel free to drop me a question in the comments below. Thanks for following along, I can’t wait to see what you build!

在这篇文章中，我们涵盖了很多内容。 如果您遇到任何问题，请在下面的评论中随意提问。 感谢您的关注，我迫不及待想看到您的构建！

Contributions, pull requests, and recommendations are always welcome for react-native-progress-steps. Give it a try in your next project and let me know what you think!

始终欢迎您对本机React步骤做出贡献，提出要求和提出建议。 在您的下一个项目中尝试一下，让我知道您的想法！

翻译自: https://www.freecodecamp.org/news/how-to-publish-a-react-native-component-to-npm-its-easier-than-you-think-51f6ae1ef850/