从零开始写一个npm包及上传
最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传。
该篇文件只记录一个大概的流程,一些细节没有记录。
tips: 这篇文章基于Vue.js 和 github
预备工作
1、首先你需要npm账号和github账号(个人用的是github)。
注册账号都比较简单,个人就不再描述。
2、将npm账号和github账号关联,这样才能找到你的代码。
在npm里面找到你的个人设置(Profile Settings),在Profile中找到GitHub Username,填入你的github账号即可
3、在npm中验证你的邮箱
如果你没有验证邮箱,npm官网中会提示你去验证邮箱。
如果没有验证邮箱,后期在npm publish 发布的时候会一直报: error you must verify your email before publishing a new package: xxx
准备工作做完之后,既然要上传,就需要npm包,下面我们先来写一个npm包
写一个npm包
1、在 gtihub 上 建立一个项目vue-test,然后clone到本地。
这里无关本文,暂不详细说明
2、在clone下来的项目vue-test中采用vue-cli快速构建一个项目。
一般npm包都是存放在lib文件夹下。我们为了在本地测试。所以我们先整体的构建一个vue项目,后期再整理上传目录。
vue-cli构建方法暂不详细说明。
3、开始写代码。
不管你这个npm包是一个功能还是一整个模块,都需要将相关的文件单独存放,方便后期整理上传目录。
在index.vue中引入将要上传的组件或者js,然后npm run dev在本地测试。
tips:
1、如何写一个模块包或者功能,不详细描述,跟平常写代码一样,你想用啥语言就用啥,本文用Vue.js 只是示例。
2、只是要注意将要上传的文件进行单独存放。
4、添加 LICENCE 文件,说明对应的开源协议。
新增一个文件名为 LICENCE. 的文件
- 到SPDX License List或者Open Source Initiative,下载相应协议的模板。本文选用的是MIT
- 修改必要的协议时间和作者,直接复制然后修改时间和作者即可。
Copyright (c) <year> <copyright holders>
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
修改Copyright (c) <year> <copyright holders>中的 year 和copyright holders 即可。
5、添加README.md文件
描述npm包的使用方法
6、添加 .gitignore 文件
上传代码到仓库的时候,会忽略这个文件中写入的文件,文件中怎么写,暂不详细描述。
7、整理上传目录
以上文件都存在之后,功能也写完了,现在就要开始整理代码目录了。
整理之前,我们先上传代码到github上备份下,然后再整理上传。
删除vue项目中一些不必要的,只剩下功能组件或者文件。注意,如果功能文件或者组件中有引入其他文件,记得要修改文件路径。
整理完成后,上传代码到github仓库。
npm包写完了,那就上传吧。
上传
在命令窗口中,cd 进入你的项目文件夹。
1、npm login
输入你的 npm 用户名、密码 和邮箱后,会提示:
Logged in as bala001 on https://registry.npmjs.org/.
登录成功。
2、npm publish
发布npm包。如果报错的话,各位就是百度对应的错误解决办法吧。后期再来列出几个常见的错误。
发布成功之后,自然要更新了。
更新
npm version <update_type>
update_type有三个参数:
patch:补丁。比如更新前的版本是1.0.0,npm version path 回车更新后的版本为: 1.0.1
minor:小修改。比如更新前的版本是1.0.0,npm version minor 回车更新后的版本为: 1.1.0
major:大改。比如更新前的版本是1.0.0,npm version major 回车更新后的版本为: 2.0.0
版本更新之后,npm publish发布。
npm包发布成功,你就可以在你的npm package中找到你发布的包了,如你需要在其他项目中引用,直接npm install 包名,引入即可。
常见错误及解决办法
1、未验证邮箱
error code E403
error you must verify your email before publishing a new package:
该错误是因为没有验证邮箱。
解决办法:
在npm官网:https://www.npmjs.com/ 绑定邮箱之后,需要进行绑定验证,只有验证通过了,npm账号才有效。
2、private 设置问题
error Remove the 'private' field from the package.json to publish it.
解决办法:
在package.json文件中,有这样一行代码: "private": true, 改为false即可
从零开始写一个npm包及上传的更多相关文章
- 从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
前言 最近写项目开发新模块的时候,每次写新模块的时候需要创建一个组件的时候(包含组件css,index.js,组件js),就只能会拷贝其他组件修改名称 ,但是写了1-2个后发现效率太低了,而且极容易出 ...
- npm包的上传npm包的步骤,与更新和下载步骤
官网: ======================================================= 没有账号可以先注册一个,右上角点击“Sign Up",有账号直接点击“ ...
- webpack创建library及从零开始发布一个npm包
最近公司有个需求,我们部门开发一个平台项目之后,其他兄弟部门开发出的插件我们可以拿来直接用,并且不需要我们再进行打包,只是做静态的文件引入,研究一波后发现,webpack创建library可以实现. ...
- 多个module实体类集合打一个jar包并上传至远程库
本章内容主要分享多个module中的实体类集合生成到一个jar包中,并且发布到远程库:这里采用maven-assembly-plugin插件的功能来操作打包,内容不长却贴近实战切值得拥有,主要节点内容 ...
- 用python写一个简单的文件上传
用Pycharm创建一个django项目.目录如下: <!DOCTYPE html> <html lang="en"> <head> <m ...
- [Vue]写一个简单的文件上传控件
这篇将介绍如何写一个简单的基于Vue+Element的文件上传控件. 控件将具有 1. 上传队列的列表,显示文件名称,大小等信息,可以显示上传进度实时刷新 2. 取消上传 使用Element的u ...
- 如何创建NPM包并上传
1 在NPM网站上注册,并验证(verify)自己的邮箱 https://www.npmjs.com 2 用命令行定位到你的库文件夹 3 在命令行里登录npm, 按提示依次输入用户名 密码 注册邮箱 ...
- 一起学习造轮子(二):从零开始写一个Redux
本文是一起学习造轮子系列的第二篇,本篇我们将从零开始写一个小巧完整的Redux,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Promises/A+,Red ...
- 一起学习造轮子(一):从零开始写一个符合Promises/A+规范的promise
本文是一起学习造轮子系列的第一篇,本篇我们将从零开始写一个符合Promises/A+规范的promise,本系列文章将会选取一些前端比较经典的轮子进行源码分析,并且从零开始逐步实现,本系列将会学习Pr ...
随机推荐
- Mycat 简单配置
文献 https://www.cnblogs.com/parryyang/p/5758087.html 启动
- linux下安装jdk,tomcat,maven
1. jdk安装 下载jdk的linux版本. >tar -zxvf jdk1.8.0_191.tar.gz 配置环境变量: >vim /etc/profile最前面添加: expor ...
- 用Hadoop AVRO进行大量小文件的处理(转)
使用 使用使用 使用 HDFS 保存大量小文件的缺点:1.Hadoop NameNode 在内存中保存所有文件的“元信息”数据.据统计,每一个文件需要消耗 NameNode600 字节内存.如果需要保 ...
- 微信、陌陌等著名IM软件设计架构详解(转)
对微信.陌陌等进行了分析,发出来分享一下(时间有些久了) 电量:对于移动设备最大的瓶颈就是电量了.因为用户不可能随时携带电源,充电宝.所以必须考虑到电量问题.那就要检查我们工程是不是有后台运行,心跳包 ...
- 尚硅谷springboot学习3-helloworld程序
1.环境准备 –jdk1.8:Spring Boot 推荐jdk1.7及以上:java version "1.8.0_112" –maven3.x:maven 3.3以上版本:Ap ...
- Jmeter的安装与使用
安装Jmeter之前需要先配置Java环境 当配置完Jmeter运行的环境之后,就可以开始安装Jmeter了. 为什么既要告诉各位"在Linux系统内安装Jmeter",又要告诉各位"在Windo ...
- 在升级过内核的机器上安装docker遇到的一个错误
出现了以下错误: [root@osd2 ~]# service docker start Starting cgconfig service: Error: cannot mount memory t ...
- English Conversation – Checking in at an airport
English Conversation – Checking in at an airport Share Tweet Share Tagged With: Ben Franklin Exercis ...
- Hibernate学习笔记3.2(Hibernate组建映射)
1.组建映射 可以存在一个表里面 Husband.java package com.bjsxt.hibernate; import javax.persistence.Embedded; import ...
- How to remove live visual tree?
How to remove live visual tree? How to不显示实时可视化树 Remove the "Go to live visual tree" / &quo ...