做前端也有一段时间了,封装了大大小小很多的组件,至今自己都有点想不起来了有哪些了,但都是在项目代码里面。如果想跨项目使用,要用的时候需要一个个项目去翻找,还必须copy代码过去,着实头痛。
近期,恰逢公司要求封装独立的组件系统供各个系统标准化调用。这才开始将现有组件逐一进行发布。当然,公司使用的内网,这里是我经过修改后,开源后方便自己之余以供大家参考。
tips: 这里将采用第三方的插件(react-native-create-library)来进行快速集成(毕竟重复造轮子的事情,不是我们这些懒汉该有的勤勉)
现将发布npm平台的流程、方法公布如下:
$ npm install -g react-native-create-library
react-native-create-library --package-identifier com.kll.basiclayout --platforms android,ios basiclayout
这里 com.kll.basiclayout是安卓模块的包名,basiclayout为创建的项目名,这里需要特别注意,不要写成 react-native-basiclayout(当然你写了 也没有问题,但是看起来会很丑),因为当你加了react-native时,react-native-create-library会帮你在创建项目名称的时候会自动添加react-native 前缀,如果你在创建模板的时候加了react-native的话,创建出来的项目将是react-native-react-native-basiclayout(当然你能接受我也没啥说的)。
$ mv basiclayout react-native-basiclayout
这里不要多说吧 ,各位看官应该都能看得懂!
到此,项目模板算是建好了。接下来就是需要编写我们的组件代码了。
编写组件代码前,我们来看一下此事的项目结构图
如果我们封装的是一个需要调用安卓或ios原生的方法的组件,在安卓和ios中分别编写好方法(如果各位不具备原生开发的能力,可以查找教程进行学习,这里不过多说明),然后在index.js中调用,之后暴露出去即可。
当然,如果是纯javescript组件,则可以删除android和ios文件夹。
编写好的组件代码,export default Basiclayout暴露出去即可。
git将本地已有项目,并推送到远端Git仓库操作,有以下几步操作:
1. 创建本地项目,在项目根目录执行git init命令
git init
2. 在git服务器上创建一个仓库,这里使用GitHub创建一个仓库。
例如这个git仓库 https://github.com/kanglang/react-native-basiclayout.git
3. 执行git remote add origin ,git path 可以在【Clone or download】中获取。
git remote add origin https://github.com/kanglang/react-native-basiclayout.git
4.git remote -v 查看远程关联的仓库地址
如果第3步关联错误,先 git remote rm origin 取消关联,在重复第3步
5. 从远程分支拉取master分支并与本地master分支合并(如果远程仓库无任务文件,省略此步)
git pull origin master:master
6. 提交本地分支到远程分支
git add -A
git commit -m '初始化git项目'
首次提交 git push -u origin master
往后 git push origin master
以上6步做完,代码已成功提交git 仓库
这里必须要强调下,淘宝镜像是不能调用npm的api的,所以先得切换到npm 的镜像
npm config get registry # 查看当前镜像源
npm config set registry=http://registry.npmjs.org # 更改回官方镜像源
1、先创建账户
$ npm adduser
这里根据提示一步步进行即可或者通过官网去注册
2、登录npm
$ npm login
根据提示依次输入用户名、密码、邮箱即可登录。
3、查看是否登录成功
$ npm whoami
4、创建 .gitignore 和 .npmignore
将不希望被提交到github和npm官网的文件 分别加入这两个文件中
5、完善package.json
主要有发布所需的相关信息,包括:组件名、版本号、描述、入口文件、作者、依赖、仓库地址等等关键信息
首次发布,执行如下命令,看到success即成功
$ npm publish
更新发布
// 修改package.json文件中version后继续下一步操作
$ npm publish
到此 组件封装发布到npm官网的流程和方法就说完了,如果跟各位看官有不一样的方法的 ,请评论交流!
如果此贴能够帮到各位,也请各位看官点赞+关注哦!!