React-Native 构建 lib,并发布到 npm

2022-01-18 21:27:18 浏览数 (1)

React-Native 怎么样构建一个 lib 作为其它项目的依赖呢?其实也很简单,接下来,我们一起来学习一下吧。

首先,您得了解下 react-native-create-module 这个工具,通过它 react-native-create-module 可以快速创建一个包含 Adroid 和 iOS 系统下的模块。

下面我简单介绍下如何安装和使用 react-native-create-module

NPM 模块详情:https://www.npmjs.com/package/create-react-native-module

GitHub 地址:https://github.com/brodybits/create-react-native-module

安装 react-native-create-module

安装 react-native-create-module 还是很简单的,利用 npm 或者 yarn 将其全局安装到自己环境就好了

代码语言:javascript复制
# npm 安装方法
npm install -g create-react-native-module
 
# yarn 安装方法
yarn add -g create-react-native-module

构建一个 lib 项目

进入到一个空目录,这里的目录以及模块名都是你自己决定的,如:

代码语言:javascript复制
# 进入 /workspace/rn/ 目录
cd /workspace/rn/

# 创建一个叫 `demo-lib` 的模块,如:
create-react-native-module demo-lib --package-identifier com.pzj.demo

这样,我们就创建好了一个名叫 demo-lib 到项目,com.pzj.demo 是它的包名。

在使用create-react-native-module 创建模块时,可以配置一些参数,如:

代码语言:javascript复制
Usage: create-react-native-module [options] <name>

Options:

  -V, --version                             显示版本号
  --prefix <prefix>                         组件模块的名字 (默认值: ``)
  --module-name <moduleName>                要在其中使用的模块库包名,也就是要写到 package.json 中的 name。 默认值: react-native-(name in param-case)
  --module-prefix <modulePrefix>            如果指定了模块名,则忽略组件模块的模块前缀 (默认值: `react-native`)
  --package-identifier <packageIdentifier>  [Android] Android 模块使用的 Java 包标识符 (默认值: `com.reactlibrary`)
  --platforms <platforms>                   模块将被创建为什么平台。用 , 分隔 (默认值: `ios,android`)
  --tvos-enabled                            生成启用 tvOS 构建的模块( 需要,react-native-tvos 最低版本为0.60,并启用 iOS 平台)
  --github-account <githubAccount>          库模块所在的 github 帐户 (默认值: `github_account`)
  --author-name <authorName>                模块作者的名字 (默认值: `Your Name`)
  --author-email <authorEmail>              模块作者的邮箱 (默认值: `yourname@email.com`)
  --license <license>                       许可证类型 (默认值: `MIT`)
  --view                                    将模块生成为一个非常简单的原生视图组件
  --use-apple-networking                    [iOS] 在 podspec 中使用 “AFNetworking” 依赖项作为示例,并在 iOS 代码中使用它
  --generate-example                        生成一个示例项目并将库模块链接到它,需要同时安装 react-native-cli 和 yarn
  --example-name <exampleName>              示例项目的名称 (默认值: `example`)
  --example-react-native-version <version>  对生成的示例项目使用 React native 版本 (默认值: `react-native@latest`)
  --write-example-podfile                   [iOS] 不支持实验特性:写入(或覆盖)示例 ios/Podfile
  -h, --help                                输出帮助信息

发布 lib 项目到 npm

1、注册一个 npm 账号

您可以在 www.npmjs.com 官方网站中创建你的 npm 账号。

2、用命令行登录 npm 账号

代码语言:javascript复制
npm login --registry=http://registry.npmjs.org

输入用户名和密码,登录完成后,您可以用 npm whoami 命令来查看是否成功登陆成功,如:

代码语言:javascript复制
 npm whoami

3、修改 demo-lib 项目目录下的 package.json 文件

package.json 文件中定义了组件名、版本号、作者、描述、依赖等发布信息,你需要修改为自己的信息,比如:

代码语言:javascript复制
{
  "name": "react-native-demo-lib",
  "version": "1.0.0",
  "description": "a react-native demo-lib for android and ios",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [
    "react-native",
    "android",
    "advert",
    "gdt",
    "tt"
  ],
  "author": {
    "name": "qhkj",
    "email": "service@qianhaikeji.cn"
  },
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git@github.com:pengzhenjin/react-native-demo-lib.git"
  },
  "devDependencies": {
    "react": "16.9.0",
    "react-native": "^0.61.1"
  },
  "peerDependencies": {
    "react-native": ">=0.47"
  }
}

4、发布 npm 包

进入 react-native-demo-lib 项目根目录,执行 npm publish --registry=http://registry.npmjs.org 即可,如:

代码语言:javascript复制
$ cd react-native-demo-lib
$ npm publish --registry=http://registry.npmjs.org

发布成功后,您可以进入www.npmjs.com 官方网站中查看是否发布成功。

0 人点赞