react npm 包_想要发布您的第一个React本机npm软件包，这些是确切的步骤

react npm 包

Creating your own package is a great way to showcase your work, they say. Giving back to the community improves your chances on the job market, they say. Designing an idea and releasing a product that others can use helps you become a better developer, they say. Yet, publishing your first React Native npm package can be somewhat of a daunting task.

他们说，创建自己的包装是展示您的作品的好方法。 他们说，回馈社区可以提高您在就业市场上的机会。 他们说，设计一个想法并发布其他人可以使用的产品可以帮助您成为更好的开发人员。 然而，发布您的第一个React Native npm软件包可能有点艰巨。

This week, after numerous hours of trial and error, I finally managed to publish my first npm package. And looking back at the process now, it is actually quite simple to do.

在经过数小时的反复试验之后，本周，我终于设法发布了我的第一个npm软件包。 现在回头看一下这个过程，实际上很简单。

My package imported in an example project 我的包导入到示例项目中

The package I published provides a single custom component that renders an enhanced SectionList with a bunch of options to customise its look & feel. The package, which works for both Expo as well as React Native Cli projects, can be found here. But I get it, you’re here for the how-to. So let’s get to it!

我发布的包提供了一个自定义组件，该组件呈现了一个增强的SectionList，其中包含许多选项以自定义其外观。 封装， 这两个世博会，以及本地做出ReactCli的项目作品 ，可以发现在这里 。 但我明白了，您来这里的方法。 因此，让我们开始吧！

React Native Resources: Are you a React Native developer and always on the lookout for resources to build better apps? Then perhaps I can interest you to Signup for my newsletter.

React Native资源：您是React Native开发人员，并且一直在寻找资源来构建更好的应用程序吗？ 然后，也许我可以使您对我的时事通讯感兴趣。

建立您的资源 (Build your resource)

To build something that others can use starts with creating something that you have used yourself inside your own project. Therefore, the starting point to building your npm package is any regular project that makes use of your candidate component, function or resource as a regular import.

要构建其他人可以使用的东西，首先要创建自己在自己的项目中使用过的东西。 因此，构建npm软件包的起点是任何将候选组件，功能或资源用作常规导入的常规项目。

import SelectableSectionList from ‘../src/SelectableSectionList’;

Now let’s assume that your candidate resource is complete, user-friendly and ready for publishing. The next step is be to setup a new project that will become your npm package.

现在，假设您的候选资源是完整的，用户友好的并且可以发布。 下一步是设置一个新项目，该项目将成为您的npm软件包。

准备你的图书馆 (Prepare your library)

Your package starts with a new folder that has your package name. Inside this folder, copy over the package project files from your working project. Make sure to only copy over the minimal required files and folders.

您的软件包以包含您的软件包名称的新文件夹开始。 在此文件夹中，从工作项目中复制包项目文件。 确保仅复制最少的必需文件和文件夹。

Your new project should at least contain:

您的新项目至少应包含：

• A src folder that at the bare minimum contains an index file from which your package’s resources are exported:

  一个src文件夹，其中至少包含一个索引文件，从该文件中可以导出软件包的资源：

export { default as SelectableSectionList } from ‘./SelectableSectionList’;

• A package.json file, stripped from all dependencies that are not used in your package. Here, it’s important to realise that:

  一个package.json文件，从包中未使用的所有依赖项中剥离。 在这里，重要的是要意识到：

dependencies include modules that are installed automatically when users run npm install on your package.

依赖项 包括当用户在软件包上运行npm install时自动安装的模块。

devDependencies include modules that are not installed when users run npm install on your package, unless they assign the — dev option to the install command.

devDependencies 包括用户在软件包上运行npm install时未安装的模块，除非他们为install命令分配了-dev选项。

peerDependencies include modules that must be installed manually by your package users. When running, if the dependency is missing, they get an error.

peerDependencies 包括必须由软件包用户手动安装的模块。 运行时，如果缺少依赖项，则会收到错误消息。

Also, inside your package.json, make sure to add the necessary ‘name’, ‘version’, ‘description’, ‘author’, ‘license’ and other required information. Without it, your package may get rejected.

另外，在package.json中 ，确保添加必要的“名称”，“版本”，“描述”，“作者”，“许可证”和其他必需信息。 没有它，您的包裹可能会被拒绝。

Don’t worry about the ‘files’ and ‘scripts’ fields for now 现在不用担心“文件”和“脚本”字段

• A project’s tsconfig.json file, if your package is written with TypeScript.

  项目的tsconfig.json文件(如果您的程序包是使用TypeScript编写的)。

• A .gitignore file.

  .gitignore文件。

• A README.md file with package info and use instructions.

  包含软件包信息和使用说明的README.md文件。

• And optionally, the ESLint and prettier config files if applied to your setup.
  另外，如果将ESLint和更漂亮的配置文件应用于您的设置，则可以选择。

Once done copy-pasting your files and making the necessary modifications, open your command-prompt tool and run the install command:

复制粘贴文件并进行必要的修改后，打开命令提示符工具并运行install命令：

$ cd  $ yarn install

用bob构建一个打包模块 (Build a package module with bob)

This step took by far the most time to understand.

到目前为止，这一步骤花费了最多的时间来理解。

Your library will be useless unless it gets compiled into a React Native library. Also, your library’s access point will be different as you are no longer building your project with Expo (if that was the case…). Moreover, if your project is written with TypeScript, it would be nice to have access to your package from TypeScript and JavaScript projects alike.

除非将其编译为React Native库，否则您的库将无用。 另外，您的图书馆的访问点将有所不同，因为您不再使用Expo构建项目(如果是这样的话……)。 此外，如果您的项目是使用TypeScript编写的，那么可以从TypeScript和JavaScript项目访问您的包将是一件很不错的事情。

To set this up manually would be a bit much to ask from us mere mortals, but after some searching, I found help here and here. I noticed some of the other packages I use contained references to bob, so I decided bob would be a good option to get me through this step.

仅仅是凡人，要手动设置它会有点困难，但是经过一番搜索，我在这里和这里找到了帮助。 我注意到我使用的其他一些软件包包含对bob的引用，因此我认为bob是使我顺利完成此步骤的一个不错的选择。

What’s nice about bob is that it offers tools to create new projects from scratch and to configure an existing project like ours:

bob的优点是它提供了从头开始创建新项目并配置像我们这样的现有项目的工具：

Step 1: install bob as devDependency

第1步 ：将bob安装为devDependency

yarn add --dev @react-native-community/bob

Step 2: configure bob

第2步 ：配置鲍勃

At the bottom of your package.json add the following:

在package.json的底部添加以下内容：

“@react-native-community/bob”: {  “source”: “src”, // your project files's main folder  “output”: “dist”, // your chose output folder  “targets”: [“module”, “typescript”] // typescript is optional}

Note: if yours is not a TypeScript project, you can emit “typescript” from your “targets” field.

注意：如果您不是TypeScript项目，则可以从“目标”字段中发出“打字稿”。

Step 3: add the “bob build” script to your package.json:

步骤3：将“ bob build”脚本添加到package.json中 ：

“scripts”: {  “prepare”: “bob build”}

Step 4: configure entry points inside your package.json

步骤4：在package.json中配置入口点

//... other fields“main”: “dist/module/index.js”,“module”: “dist/module/index.js”,“react-native”: “src/index.ts”,“types”: “dist/typescript/src/index.d.ts”,“files”: [  “dist/”,  “src/”]

Note: if yours is not a TypeScript project, you can emit the “types” field. If yours is a TypeScript project, emitting the “types” field will result in warning messages.

注意：如果您的不是TypeScript项目，则可以发出“类型”字段。 如果您是TypeScript项目，则发出“ types”字段将产生警告消息。

Step 5: update .gitignore

步骤5：更新.gitignore

# generated files by bob
lib/

Step 6: build

步骤6：建立

In the project folder inside your command-line tool, run:

在命令行工具内的项目文件夹中，运行：

$ yarn run prepare

测试你的图书馆 (Test your library)

Your library is now ready for use, meaning it can be installed inside a project as if it were already an npm package. However, before we create an npm account and upload the package to the repository, let’s run it locally in an example project to make sure everything works as intended.

您的库现在可以使用了，这意味着可以像已经是npm软件包一样将其安装在项目中。 但是，在创建npm帐户并将包上传到存储库之前，让我们在示例项目中本地运行它，以确保一切正常。

For this, we’re going to package our module into a .tgz file and install it as such in our example project.

为此，我们将把模块打包到.tgz文件中，然后将其安装在示例项目中。

Inside your package folder, run the following command in your command-line tool:

在您的程序包文件夹中，在命令行工具中运行以下命令：

$ npm pack

Next, leave your package folder, cd into your example project folder and run the install command:

接下来，保留您的包文件夹，cd进入示例项目文件夹并运行install命令：

$ yarn install 

Note: the package location points to the location of your .tgz file on your local machine.

注意：软件包位置指向您的.tgz文件在本地计算机上的位置。

You should now be able to…

您现在应该能够...

import Foo from ‘your-package-name’

…and run your example project.

…并运行您的示例项目。

发布您的图书馆 (Publish your library)

Once your package is running successfully, it’s time to make it public.

程序包成功运行后，就可以将其公开。

While not a must, most publishers decide to publish the source code of the package on Github. You probably know the drill, but to be concise, create a new repository on your Github account and push your project code with:

虽然不是必须的，但大多数发布者决定在Github上发布该软件包的源代码。 您可能知道演练，但为了简洁起见，请在您的Github帐户上创建一个新的存储库，并使用以下命令推送您的项目代码：

git initgit add .git commit -m “Initial commit”git remote add origin https://github.com//.gitgit push -u origin master

Now you can add a reference to your github repo on your package’s npm detail page. This requires you to make a final change to your package.json file by adding:

现在，您可以在软件包的npm详细信息页面上添加对github存储库的引用。 这要求您通过添加以下内容对package.json文件进行最终更改：

“repository”: “https://github.com//"

You could also add your homepage in the same way… 您也可以用相同的方式添加主页...

Next, it’s time to publish to npm. For this, a personal npm account is required. You can do this manually at npmjs.com or inside your command-line tool by running the following command and providing your details:

接下来，是时候发布到npm了。 为此，需要一个个人npm帐户。 您可以通过运行以下命令并提供您的详细信息，在npmjs.com或命令行工具内部手动执行此操作：

$ npm adduser

Make sure to confirm you email address, before running the publish command, or your deploy will fail. Once done, publish with:

在运行发布命令之前，请确保确认您的电子邮件地址，否则部署将失败。 完成后，发布：

$ npm publish

Your package is now live and ready to be installed from anywhere, with:

您的软件包现在可以使用，可以通过任何位置安装：

$ npm install or$ yarn install 

结论 (Conclusion)

Publishing a React Native package becomes incredibly easy by following the above series of steps. It took me a number of hours to publish my first npm React Native package, so I hope this article helps you save time and gets you motivated to publish your own npm packages. Make sure to put a link to it in the comments if you do!

通过执行上述一系列步骤，发布React Native包变得异常容易。 我花了几个小时才发布我的第一个npm React Native软件包，所以我希望本文可以帮助您节省时间并激发您发布自己的npm软件包的动力。 如果需要，请确保在评论中添加指向它的链接！

翻译自: https://medium.com/javascript-in-plain-english/want-to-publish-your-first-react-native-npm-package-these-are-the-exact-steps-64f965271cf8

react npm 包