npm发布私有包

npm发布私有包@TOC

1.创建自定义组件模板项目

1.1 安装插件 react-native-create-library

// 在mac上如果没有权限，指令前面添加sudo
npm install -g react-native-create-library

1.2 创建模板项目

react-native-create-library [options] <name>
// 创建的时候可以指定项目包名，以及平台
react-native-create-library --package-identifier com.zyhdev.alertdialog --platforms android,ios zyhdev-testlibray
// --package-identifier com.XXX.XXX 指定原生包名
// --platforms android,ios 指定平台，默认android,ios,window

options

Usage: react-native-create-library [options] <name>
  -h, --help output usage information
  -V, --version output the version number
  -p, --prefix <prefix> The prefix for the library (Default: `RN`)
  --module-prefix <modulePrefix> The module prefix for the library (Default: `react-native`)
  --package-identifier <packageIdentifier> (Android only!) The package name for the Android module (Default: `com.reactlibrary`)
  --namespace <namespace> (Windows only!) The namespace for the Windows module
   (Default: The name as PascalCase)
  --platforms <platforms> Platforms the library will be created for. (comma separated; default: `ios,android,windows`)
  --github-account <github_account> The github account where the library is hosted (Default: `github_account`)
  --author-name <name> The author's name (Default: `Your Name`)
  --author-email <email> The author's email (Default: `[email protected]`)
  --license <license> The license type of this library (Default: `Apache-2.0`)
  --generate-example <shouldGenerate> Will generate a RN example project and link the new library to it (Default: `false`)

android平台必须使用 package-identifier指定包名

重命名一下项目名

mv alertdialog react-native-zyhdev-testlibray

利用react-native-create-library生产的项目，一些跟组件相关的名称或者类会默认加上react-native或者RN前缀。
例如，如果你的初始项目名是react-native-card-view，那么package.json中定义的组件名将是react-native-react-native-card-view，android模块中定义的相关类会是RNReactNativeCardviewModule.java

安装dependencies

在项目根目录执行npm install，不用关心peerdependencies

项目结构：（tree命令，mac默认没有，需要另外安装 brew install tree）

1.3项目配置

eslint配置，详见React Native ESLint配置
.npmignore npm 定义哪些文件发布时不打包
.gitignore 定义哪些文件不提交到github

如果有.gitignore但是没有.npmignore文件，那么.gitignore可以充当.npmignore的作用
具体规则可以参照：npm-developers, .gitignore or .npmignore pattern rules

package.json npm package.json介绍.md

2. 功能实现

2.1编写组件

注意：

如果组件不需要调用原生api进行开发，可以直接删除ios和android文件夹即可，如果需要原生配合，需要自定义module，需要对ios和Android分别开发，引用：React Native自定义原生（iOS和Android）模块Module

3.测试

创建一个测试的react-native项目
react-native init Demo

可以在library中的example中，也可以直接在library根目录直接创建example为demo项目
demo项目可以和组件目录react-native-zyhdev-testlibray同级，也可以放在任何位置，为了操作方便，建议放在同级
然后把本地或者已经发布的组件安装到example项目中进行测试

3.1 本地代码测试

3.1.1 yarn link

$ cd react-native-zyhdev-testlibray
$ yarn link
// 如果项目不是example本身需要cd到项目文件夹下例如`cd example/Demo
$ cd example/Demo/
$ yarn link react-native-zyhdev-testlibray
$ react-native link react-native-zyhdev-testlibray

说明

yarn link是把当前目录中的本地代码用yarn注册为react-native-zyhdev-testlibray的一个本地组件，组件名字react-native-zyhdev-testlibray其实是根据package.json中的name字段的值来的，跟目录名无关，只不过这里正好等于目录名
yarn link react-native-zyhdev-testlibray命令是把这个本地组件react-native-zyhdev-testlibray安装到了example的项目中，你可以在example/node_modules中找到这个组件
react-native link react-native-zyhdev-testlibray,是做了android/iOS的原生模块link
其实yarn link这种方式简单来说，就是做了一个symbol link，也就是说，example/Demo/node_modules/react-native-zyhdev-testlibray/目录中的内容是指向react-native-zyhdev-testlibray/目录内容，你改动react-native-zyhdev-testlibray/目录下的代码，相当于直接改动example/Demo/node_modules/react-native-zyhdev-testlibray/这个目录中的代码，这样就能够达到边修改组件代码边看效果的目的了

3.1.2 package.json中配置本地路径

直接在example/Demo的package.json中增加dependencies
example/Demo/package.json

{
  "name":"example",
  ...
  "dependencies": {
    "react-native": "^0.55.4",
    // 需要测试一下
    "react-native-zyhdev-testlibray":"file:../../../react-native-zyhdev-testlibray",
    ...
  }
  ...
}

然后执行react-native link react-native-zyhdev-testlibray
跟yarn link一样，也相当于做了symbol link，直接修改react-native-zyhdev-testlibray/目录下的代码，相当于直接改动example/Demo/node_modules/react-native-zyhdev-testlibray/这个目录中的代码

node package.json

3.2 已上传/发布代码测试

3.2.1 通过github

如果代码上传到github仓库上，可以通过npm install安装你的组件
npm install --save https://github.com/841016877/react-native-zyhdev-testlibrary.git
或者
[email protected]:841016877/react-native-zyhdev-testlibrary.git
然后执行
react-native link react-native-rn-cardview

3.2.2 通过npm

npm install --save react-native-rn-cardview
然后执行
react-native link react-native-rn-cardview

3.组件发布

3.1 上传代码到github

方式一、在github中手动创建项目，然后拉取项目，在本地git项目中创建react-native-library

1.git clone "github对应的项目git地址"
2、 cd react-native-app-info
3.git add .
4.git commit -a -m 'init repository'
5. git push -u origin master

方式二、本地创建library库，然后在github上手动创建仓库，进行关联
本地执行

1、 cd react-native-app-info
2、 git init //初始化本地仓库
3、 git add . //添加要push到远程仓库的文件或文件夹
4、 git commit -m 'init repository'
5、 git remote add origin "github对应的项目git地址" //建立链接远程仓库
6、 git push -u origin master #将本地仓库push到远程仓库

3.2组件发布到npm registry

开发好组件之后，想在其他的项目(或者提供给其他人安装使用)中通过npm install的方式安装你的组件，那么你的组件必须发布到npm registry中。

3.2.1 npm registry

简单来说，npm registry就相当于一个包注册管理中心。它管理着全世界的开发者们发布上来的各种插件，同时开发者们可以通过npm install的方式安装所需要的插件。
npm官方registry为：http://registry.npmjs.org/
国内速度较快的为：https://registry.npm.taobao.org/

查看本地当前使用的registry
npm config get registry

切换registry
npm config set registry http://registry.npmjs.org/
临时切换registry
npm publish --registry http://registry.npmjs.org/
注意： 国内目前发布组件时，必须切换为npmjs，否则npm publish也不会成功

3.2.2 登录

npm login
registry必须使用npmjs才能登录成功
npm whoami确认是否登录成功

3.2.3 发布组件到npm

npm publish
可以在线查看确认是否发布成功。访问链接(是你发布的npm package名)：
https://www.npmjs.com/package/
看看是否已经有内容了，有内容说明发布成功了。

3.2.4 更新组件并发布

git commit
// 保证是npmjs，不能使用国内镜像
npm version <update_type>
npm publish
push tag
push branch

npm publish命令是用来自动更新版本号，update_type取值有patch minor major，分别有以下场景
update_type 场景版本号规则举例

首次发布版本号1.0.0 1.0.0
patch 修复bug、微小改动时从版本号第3位开始增量变动 1.0.0 -> 1.0.1
minor 上线新功能，并且对当前版本已有功能模块不影响时从版本号第2位开始增量变动 1.0.3 -> 1.1.3
major 上线多个新功能模块，并且对当前版本已有功能会有影响时从版本号第1位开始增量变动 1.0.3 -> 2.0.0

如果首次发布版本号不是1.0.0的话，那么用$ npm version <update_type>
来更新会报错，因为你没有按照它约定的版本规则来，这个时候，你可以手动修改package.json中的version字段为符合约定规则的版本号，然后直接执行$ npm publish就可以，然后下次再增量更新的时候，就可以直接使用npm version <update_type>的方式来自动更新版本号了

TAG

首次发版执行npm publish后需要自己手动打tag
每次使用npm version命令更新版本后，会在本地新建一个当前版本的tag，每次npm publish后需要将tag推到github

// 新建tag
git tag <版本号> -m "<备注信息>"
// 删除tag
git tag -d <版本号>
// 打印所有标签
git tag`
// 推送本地tag到远端
git push origin v1.0.1

"clean": "watchman watch-del-all && npm start -- --reset-cache",

其他命令

npm search react-native-zyhdev-testlibray 查询组件库信息
npm search --keywords testlibrary 根据关键字查询组件库

删除组件

//删除要用force强制删除。超过24小时就不能删除了。自己把握好时间。另外删除组件后24小时内不能再publish
npm --force unpublish packageName

参考：
https://www.jianshu.com/p/e40f24e28b94
https://www.jianshu.com/p/091a68ea1ca7
https://github.com/frostney/react-native-create-library
https://www.jianshu.com/p/628c8cc17fa0