七爪源码：如何使用 TypeScript、Storybook 和 Rollup 制作反应原生组件库

我认为伟大的 React Native 开发的核心需要存在可重用的组件，这些组件可以抽象出其他开发人员不需要的细节，以便制作出令人惊叹的应用程序script error 。

所以我决定使用我当前的堆栈制作一个小型组件库，并在这样做的过程中学到了很多东西script error 。 证明如果您想成为 10 倍开发人员，为什么永远不要停止学习。 说起来容易做起来难，tbh，但不管怎样。

以下是经过一个星期六的挣扎和几乎哭泣之后，我能够使用 TypeScript 和 Tailwind 制作自己的 react-native-component-libraryscript error 。 这并不完美，但这是一个开始，所以让我们开始吧

设置一个新项目

为了启动这个项目，我们将依靠 expo（及其模板）来快速启动script error 。 运行以下命令全局安装 expo 并创建一个

npx create-expo-app --template expo-template-blank-typescript

将此应用程序命名为您想要的任何名称script error ，我选择了经典的 react-native-component-library

一旦 npx 和 expo 完成了他们的工作，我们将继续将故事书添加到我们的项目中script error 。 对于不知道的人来说，故事书是一个允许您测试和共享组件的工具。 这是一个精英工具，可以与其他人共享您的组件。

不要被愚弄，在撰写本文时，storybook 不足以将 react 原生组件作为 NPM 库共享； 但这是展示如何使用组件并展示其局限性的绝佳方式script error 。

因此script error ，要开始我们的 react 原生顺风集成，请在项目的根目录下运行此命令

npx -p @storybook/cli sb init --type react_native

安装后，我们必须更新我们的 App.tsx 以显示我们的故事书script error 。

// App.tsx

import React from 'react';

export { default } from './storybook';

注意：storybook 导出的组件可以放在任何地方script error 。 如果您想分享一个展示您的故事书的应用程序并希望强制身份验证以访问故事书，那么值得记住的事情。

你可能会想运行 yarn storybook，这会打开一个基于网络的故事书，我发现它没用script error 。 相反，通过运行 yarn ios 连接到 react native 应用程序

如果一切安装正确，预制的故事书组件应该会出现script error 。

创建组件

好的，现在一切都设置好了，我们可以专注于创建我们的第一个 typescript 组件script error 。 首先在项目的根目录下创建一个 .src。 这将是您图书馆的档案。 确保此文件夹中的所有代码都在 TypeScript 中，并且是您要共享的内容的一部分。

请注意， src 将保存您的库，而 storybook 将保存您的故事书文件script error 。 当你去发布你的图书馆时，你不会包含故事书文件。

上面的目录结构说明了我是如何创建组件并导出它们的script error 。 每个组件都是一个文件夹，而不是三个文件

component.tsx — 保存实际的组件代码（您在屏幕上看到的内容）

component.types.ts — 保存组件的类型（它的 props 应该是什么样子）

index.ts 保存每个组件的导出代码script error ，即 export { default } from "./button"

组件的 index.ts 然后按它们的名称导出每个组件

/// src/components/index.ts

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

最后， src/index.ts 导出我们所有的组件，以在我们分发和发布它时用作我们库的入口点script error 。

src/index.ts

export * from './components';

创建组件故事

现在您的 typescript 组件已经可以使用了，我们可以继续创建将在我们的故事书中显示该组件的故事，并允许我们的用户查看该组件的行为方式script error 。 为此，请转到您的故事书文件夹

在文件夹中，找到故事存档script error 。 这是您的项目的故事将存在的地方。 故事是组件的隔离空间。 它允许您轻松地在 React Native 应用程序中显示组件，并允许您通过使用旋钮来更改其道具。 这是我的示例项目的基本按钮故事，以便更好地了解正在发生的事情。

创建分布

现在这就是故事书不适合的地方，以及为什么文件夹结构很重要script error 。 对于这一部分，您需要安装 rollup 和它的一些姊妹库来开始工作。

yarn add --dev rollup rollup-plugin-dts rollup-plugin-peer-deps-external rollup-plugin-postcss rollup-plugin-terser

安装完所有内容后script error ，在项目的根目录下创建以下 rollup.config.json

最后script error 你会想要更新你的 package.json

将主入口点从 "main": "node_modules/expo/AppEntry.js" 更新为 "main":"dis/cjs/index.js"

将依赖项更改为 peerDepencies

从 package.json 中删除 expo 依赖项

添加以下脚本

"build": "rm -rf /dist && npm run build:esm && npm run build:cjs",

"build:esm": "tsc",

"build:cjs": "tsc --module CommonJS --outDir dist/cjs"

如果一切安装正确script error ，运行 yarn build 应该创建适当的 dist 文件夹

发布库

我使用 npm 发布script error ，一旦我登录，它就像将版本更新到我的库一样简单，运行 yarn build 并点击 npm publish 以将我的库发布到野外

关注七爪网script error ，获取更多APP/小程序/网站源码资源！