如何为React Native开发TypeScript NPM软件包

介绍 (Introduction)

This piece explores the development and management of TypeScript-based NPM packages for React Native. It will cover how to configure TypeScript linting and tsconfig for a package to ensure code integrity with useful VS Code extensions and settings to aid in TypeScript development.

本文探讨了用于React Native的基于TypeScript的NPM软件包的开发和管理。 它将介绍如何为软件包配置TypeScript linting和tsconfig ，以确保代码的完整性以及有用的VS Code扩展和设置，以帮助TypeScript开发。

An entire section will be dedicated to TypeScript specific development of a package, in addition to visiting a demo packages project that is available on GitHub. But there are other important aspects of developing NPM packages worth considering. Let’s firstly highlight some of those aspects so the reader gets a good intuition of what will be covered throughout this piece.

除了访问GitHub上的演示程序包项目外，整个部分还将专门针对TypeScript程序包开发。 但是，开发NPM软件包还有其他重要方面值得考虑。 首先，让我们重点介绍其中的一些方面，以便读者对本文的内容有一个很好的直觉。

软件包开发：独立与嵌入式 (Package development: standalone vs embedded)

Developing packages can either be done in a standalone project or within a project where those packages are installed and used. The latter approach makes sense if you build components for a particular project (a React Native app for example) and abstract those components into packages further down the line as they are needed for other projects.

开发软件包可以在独立项目中完成，也可以在安装和使用这些软件包的项目中完成。 如果您为特定项目(例如React Native应用程序)构建组件并将这些组件抽象到其他项目所需的软件包中，则后一种方法才有意义。

This ties into the concept of Agile Development where there may be no concrete roadmap to what components will be abstracted into packages.

这与敏捷开发的概念有关，在敏捷开发中，可能没有具体的路线图将哪些组件抽象到程序包中。

The workflow of agile package development.

敏捷包开发的工作流程。

This approach has the advantage of having package dependencies already in place, such as the peer dependencies that packages may require.

这种方法的优点是已经具有程序包依赖性，例如程序包可能需要的对等依赖性。

A peer dependency is a dependency a package requires but is not installed within its node modules. Instead, it relies on the installed version of the host project.

对等依赖项是程序包需要但未安装在其节点模块内的依赖项。 相反，它依赖于宿主项目的安装版本。

We’ll cover the types of dependencies and workspace setup in more detail further down.

我们将在后面详细介绍依赖项的类型和工作区设置。

范围可用于加快软件包开发 (Scopes can be used to speed up package development)

We’ll also cover how to use scoped packages as a way of grouping your related packages under one name — e.g. @my-org/<package_name>, allowing you to house all your packages under one organisation or branch. NPM or Yarn commands can then be executed on all packages under that scope simultaneously, thus speeding up development.

我们还将介绍如何使用作用域软件包作为将相关软件包分组为一个名称的一种方式，例如@my-org /<package_name> ，使您可以将所有软件包置于一个组织或分支机构下。 然后可以在该范围内的所有软件包上同时执行NPM或Yarn命令，从而加快了开发速度。

Upgrading all packages under a scope with yarn upgrade.

升级纱线范围内的所有卷装。

私人NPM注册管理机构解决方案 (Private NPM Registry Solutions)

Private registries allow developers to host their own packages in a private manner to compliment their internal ecosystem of app building blocks, and such a workflow has been gaining momentum in adoption. Private registries allow a developer or team to manage packages on their machine, or on a remote server in a team setting that requires authentication to access.

私有注册表允许开发人员以私有方式托管自己的程序包，以补充其内部应用程序构建基块的生态系统，并且这种工作流一直在被采用。 私有注册表允许开发人员或团队以需要进行身份验证才能访问的团队设置来管理其计算机上或远程服务器上的软件包。

The NPM registry of choice plays a big part of your development pipeline. This article will cite the Verdaccio private proxy registry as the solution to publishing packages. As Verdaccio acts as a proxy to the public NPM registry, it is flexible in that you can store your private packages on Verdaccio while simultaneously having access to the public NPM registry.

选择的NPM注册中心在您的开发流程中起着很大的作用。 本文将引用Verdaccio私有代理注册表作为发布程序包的解决方案。 由于Verdaccio可以充当公共NPM注册表的代理，因此它的灵活性在于，您可以将私有软件包存储在Verdaccio上，同时可以访问公共NPM注册表。

I have published a separate piece on Verdaccio that deep dives into setting up a remote private registry for your development team. Check out that piece here: Publish Private NPM Packages with Proxy Registry Verdaccio.

我在Verdaccio上发表了另一篇文章，深入探讨了为您的开发团队设置远程私人注册表的问题。 在此处查看该内容： 使用Proxy Registry Verdaccio发布私有NPM软件包 。

Private registries play a huge role in large entities where libraries of packages need to be stored and maintained under that particular organisation. Smaller teams can also leverage such a setup, and there are a couple of notable tools on the market now.

私有注册表在大型实体中发挥着重要作用，在大型实体中，软件包库需要在该特定组织下进行存储和维护。 较小的团队也可以利用这种设置，并且现在市场上有几个著名的工具。

Enterprise and large tech has caught on to this need. GitHub launched GitHub Packages in 2019 as they deemed the need for private registries a sizeable enough market worthy of pursuing. GitHub offer a pay-as-you-go model for using the service, the billing of which is based on storage and data transfer. This model offers a small amount of resources for free users too, that aim to onboard them into the GitHub ecosystem.

企业和大型技术已经满足了这一需求。 GitHub在2019年推出了GitHub Packages ，因为他们认为私人注册管理机构的需求是一个值得追求的足够大的市场。 GitHub提供了一种使用该服务的即付即用模型，其计费基于存储和数据传输 。 该模型也为免费用户提供了少量资源，旨在将他们加入GitHub生态系统。

NPMJS also offer a private registry service with a monthly subscription.

NPMJS 还提供按月订阅的私人注册服务。

返回开发套件 (Back to developing packages)

The next section will document the setup process of a TypeScript NPM package. As the majority of my articles are focused on React Native, the content here will be based on developing React Native packages, but the setup can be applied to any TypeScript project.

下一节将介绍TypeScript NPM软件包的设置过程。 由于我的大部分文章都集中在React Native上，因此这里的内容将基于开发React Native包，但是该设置可以应用于任何TypeScript项目。

TypeScript NPM软件包设置 (TypeScript NPM Package Setup)

VS Code is the best TypeScript-supported editor, which is no surprise since Microsoft maintain both the editor and TypeScript itself. For this reason, VS Code will be the editor of choice we’ll focus on here.

VS Code是TypeScript支持的最佳编辑器，这并不奇怪，因为Microsoft同时维护了该编辑器和TypeScript本身。 因此，VS Code将成为我们此处重点介绍的首选编辑器。

安装和配置TypeScript (Installing and Configuring TypeScript)

TypeScript is supported out of the box in VS Code, but the compiler, tsc, needs to be added to your project as a dev dependency.

打字稿是