共计 2423 个字符,预计需要花费 7 分钟才能阅读完成。
- [时间]: 2020/06/25
- [keyword]: React Native, Guide, 前端, Typescript
文章名可能会被误认为是如何开发 RN 的原生模块,这里提醒一下本文主要分享是 bob 的使用过程以及笔者遇到的坑记录
前言
相比很多小伙伴都和笔者遇到过同样的问题,开发 RN 模块的流程应该是什么样?
在很久之前 RN CLI 提供了 new-library
的命令,笔者基于这种形式开发了 react-native-uhf-helper react-native-amap-search 两个模块,当时笔者开发前端模块的经验也不充足,稀里糊涂的开发完就没在深入研究了,恰好前不久笔者对一个年久失修的模块进行了重写,也算是有机会再次发布一个 RN 模块,RN 的社区资源还是很完善的,社区组织也是发布了很多高质量的 RN 模块,于是笔者就虽然打开了一个项目 (react-native-tab-view) 研究其开发方式,经过调查,发现社区的大多数模块都是使用 bob 作为 cli
开发的,于是笔者也正式开始了开发工作。
bob 简介
https://github.com/react-nati…
bob 集成了 expo、eslint、ESLint、prettier、Typescript 等优秀的 JS 生态来帮助开发者简单的进行 RN 模块的开发。
使用
创建模块
npx @react-native-community/bob create react-native-awesome-module
添加到已存在的项目,更多请参考 https://github.com/react-nati…
yarn add --dev @react-native-community/bob
cd yourProject && bob init
是的,到此为止你就已经创建了一个用于开发 RN 模块的项目,这个项目已经集成了 ESLint、Typescript …,通过 yarn prepare
就可以生成用于发布的 .js .d.ts 文件。
发布至 npm
发布至 npm 是使用的 release-it, release-it 提供了简单方式来帮助你发布至 npm,管理 change log …,bob 已经帮我们配置好了,我们只需要执行
yarn release
嗯?似乎哪里不对劲,报错了(如果不是下面这个错就无视下面这段)
ERROR Not authenticated with npm. Please `npm login` and try again.
这表示我们还没有登录 npm 账户(如果你还没有,可以在这里注册:https://www.npmjs.com/signup),现在执行
npm login // 进入命令行交互模式
Username: your username // 输入你的 npm 用户名,按回车
Password: // 输入你的密码,这里你输入是不会显示的,输入完后按回车即可
Email: // 输入邮箱
// 提示 "Logged in as 用户名 on https://registry.npmjs.org/." 即表示成功
// 这时输入 npm whoami 即可看到登录的账户
好的,我们再次执行
yarn release
嗯哼?又报错,有完没完了!!!!(如果不是下面这个错就无视下面这段)
ERROR Environment variable "GITHUB_TOKEN" is required for GitHub releases.
Documentation: https://github.com/release-it/release-it#github-releases
这里报错的同时也贴出了解决办法,我们点进去看看,笔者发现 release-it 为了能帮我们自动打 tag,自动发布 release,需要有仓库的访问权限,github 提供了基于 token 的方式使三方应用不需要登录密码也可以访问仓库的功能。
生成 token
首先打开:https://github.com/settings/t…
选择左侧 Personal access tokens -> Generate new token
然后点击最下方的 Generate token,即可生成
保存你的 token,然后在项目根目录(package.json)的目录下创建一个 .env 文件,将其加在 .gitignore 里面(即最后加一行 .env,因为这是你的 github token 不要上传到互联网,否则有安全问题)
内容为:
GITHUB_TOKEN="你刚刚复制的 token"
然后安装 dotenv-cli
yarn add dotenv-cli --dev
将 package.json script 的 release 修改为: dotenv release-it
(原始应为 release-it
)
原理是因为 release-it 在运行的时候会在环境变量里读取一个名字叫做 GITHUB_TOKEN
的环境变量,我们使用 dotenv-cli
所做的事就是帮我们把 .env 文件内容添加到环境变量,所以dotenv release-it
其实等价于 export GITHUB_TOKEN="f941e0..." && release-it
,不过 Windows
不支持 export
,并且如果我们每次发布一个包都要手动 export GITHUB_TOKEN=xx && release-it
也太过于麻烦,所以建议使用 dotenv-cli
。
再次执行 release
yarn release
好的,如果成功了的话,效果如小图。
尾声
好了,本文到此就结束了,下面给自己打一个小广告,前段时间写了一个 RN 的模块,fork 自开源库,并且进行了完全(99%) 的重写,笔者也经过了调查,可能是最好的(违反广告法警告⚠️)RN Dropdown 库,如果有需求可以试试:
https://github.com/MonchiLin/…
接下来的时间笔者会增加更多的案例以及完善文档,目前虽然版本只有 0.2.2,但是笔者自己也在项目中使用多次,质量方面可以放心,并且 api 已经确定下来了。