-
前端开发经常需要使用到 npm 安装第三方库,那么如何将自己写的库上传到 npm 进行使用呢?
-
如果在项目中使用到依赖包,可以先了解一下 npm 命令使用介绍以及区别,里面有对安装依赖包的详细介绍
二、注册 NPM 账号
- 注册好之后记得去填的注册邮箱里面验证一下,在继续下一步,否则发布会报错。
三、打开命令行,登录 NPM
- 在登录之前,先确定一下
NPM镜像,如果镜像在之前设置为了淘宝镜像,那么在使用npm login登录时会出错,所以需要先将源替换为官方源,然后再上传。
// 查看当前 npm 源配置
$ npm config ls
// 查看当前 npm 全部源配置
$ npm config ls -l
// 修改 npm 源地址为官方源
$ npm config set registry registry.npmjs.org/
// 将 npm 源地址修改为淘宝源(用于安装 npm 速度慢的时候使用)
$ npm config set registry registry.npm.taobao.org/
-
通过执行
$ npm config ls -l命令查看metrics-registry = "https://registry.npmjs.org/"是否为官方源,如果不是则使用上面命令设置为官方源。 -
进行登录
// 登录命令
$ npm login
// 退出登录命令
$ npm logout
- 运行登录命令之后输入
NPM 账号、密码、邮件
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm login
Username: dengzemiao
Password:
Email: (this IS public) xxxxx@163.com
Logged in as dengzemiao on registry.npmjs.org/.
- 登录之后出现最下面这行
Logged in as dengzemiao on https://registry.npmjs.org/.就说明登录成功了。
四、上传发包
- 创建一个文件夹,例如:DZMTest
$ cd DZMTest
- 在文件中创建 package.json,运行命令之后一路回车到底,没啥好改的,等下到文件里面也可以改。
$ npm init
package.json文件全部字段解释:
一般创建出来的 package.json 文件只会包含下面其中一部分字段,其他都是隐藏可选字段,根据自己的情况使用,下面列出来大部分常用的字段用于参考:
{
// 发布的包名,默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
"name": "#####",
// 版本号,每次要更新
"version": "1.0.0",
// 包的描述
"description": "仅供测试,别下载",
// 文件入口,默认是 index.js,可修改
"main": "index.js",
"scripts": {
// 测试命令,可以不填直接回车
"test": "echo "Error: no test specified" && exit 1"
},
// 作者名称
"author": "###",
// 包遵循的开源协议,默认是ISC
"license": "ISC",
// 因为组件包是公用的,所以 private 为 false
"private": false,
// 当前包需要依赖的第三方组件,如何安装使用依赖包,可以看看文章顶部的NPM命令介绍文章
"dependencies": {},
// "devDependencies": {}
// 指定代码所在的仓库地址
"repository": {
"type": "git",
"url": "git+github.com/dengzemiao/…"
},
// bug在哪里提
"bugs": {
"url": "github.com/dengzemiao/…"
},
// 项目官网的地址
"homepage": "github.com/dengzemiao/…",
// 指定打包后,包中存在的文件夹
"files": [
"dist",
"src"
],
// 指定了项目的目标浏览器的范围
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
// 项目关键词,供搜索
"keywords": [
"测试"
]
}
- 调整
package.json,文件中这两个是必须要填写的,第一个是包名,第二个是版本号,其他随意,更具自己需求调整,没什么特别需求就修改名字跟版本号直接上,其他默认是啥就是啥,看自己需求去改或者增删。
{
"name": "dzmtest",
"version": "1.0.0"
}
- 去
NPM官网查询一下当前包名是否存在,存在的话就需要换一个:
- 在
DZMTest文件夹里面在创建一个index.js文件,这也是上面设置的入口文件
index.js:
// index.js 页面方法
function indexTest () {
console.log('index.js 测试输出')
}
// 导出 (module.exports 如果使用不是很熟,百度一下就知道了,用法很简单)
module.exports = { indexTest }
- (如果不需要本地测试一下可以跳过) 创建好
index.js之后可以本地测试一下,创建一个test.js在这个文件里面导入index.js进行本地使用一下
test.js:
// 导入 index.js 中的方法进行本地测试
var index = require('./index')
// 执行方法
index.indexTest()
- 我这边用的是
VSCode装了运行js的插件可以直接右键运行代码,输出为
[Running] node "/Users/dengzemiao/Desktop/NPM/DZMTest/test.js"
index.js 测试输出
[Done] exited with code=0 in 0.054 seconds
-
这样,说明代码是没有问题的,那么可以进行发布了!!
-
(可选) 可以在根目录下新建
.npmignore文件,设置忽略发布文件,文件不多可以不加,看自己心情。
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
local env files
.env.local
.env.*.local
Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
Editor directories and files
.idea
.vscode
*.suo
.ntvs
*.njsproj
*.sln
.sw
- 发布代码
$ npm publish
- 如果登录的 NPM 账号没有验证邮箱,运行命令之后会报错
you must verify your email before publishing a new package,所以注册之后记得去邮箱里面验证一下,验证之后可以再次运行发布命令,如果还报这个错误可以重新登录一下NPM账号:
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish
npm notice
npm notice 📦 dzmtest@1.0.0
......
npm ERR! code E403
// 主要是这行错误
npm ERR! 403 403 Forbidden - PUT registry.npmjs.org/dzmtest - you must verify your email before publishing a new package: www.npmjs.com/email-edit
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-22T03_27_19_859Z-debug.log
- 如果出现这个错误,意思是需要修改
package.json中的version版本号,一般是版本已经存在,新项目发布应该不会报这个错误。
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish
npm notice
npm notice 📦 dzmtest@1.0.0
......
npm ERR! code E403
// 主要是这行错误
npm ERR! 403 403 Forbidden - PUT registry.npmjs.org/dzmtest - You cannot publish over the previously published versions: 1.0.0.
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-23T03_32_29_970Z-debug.log
-
You cannot publish over the previously published versions: 1.0.0.这个错误是版本已经存在,需要修改一个新版本号在上传,这种问题一般在后续版本迭代中出现,忘记修改版本号就直接提交。 -
下面是
version字段版本格式(这里只是建议这么写,不在意可以随意)
1、版本格式:主版本号、次版本号、修订号
2、版本号递增规则如下:(例如:我原本的项目是 1.0.0 版本的话)
主版本号:当你做了不兼容的 API 修改,此情况版本应该为 1.0.1
次版本号:当你做了向下兼容的功能性新增,此情况版本应该为 1.1.0
修订号:当你做了向下兼容的问题修正。此情况版本应该为 2.0.0
3、通过 npm version <update_type> 自动改变版本
update_type 为 patch、minor,、major 其中之一,分别表示补丁,小改,大改。
例如: $ npm version minor v2.0.0
- 如果有这个错误,可以修改一下
package.json中的version为1.0.1版本,然后再次执行发布命令
{
"name": "dzmtest",
"version": "1.0.1",
}
- 再次执行发布命令
$ npm publish
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish
npm notice
npm notice 📦 dzmtest@1.0.0
npm notice === Tarball Contents ===
npm notice 130B index.js
npm notice 114B test.js
npm notice 202B package.json
npm notice === Tarball Details ===
npm notice name: dzmtest
npm notice version: 1.0.0
npm notice package size: 471 B
npm notice unpacked size: 446 B
npm notice shasum: fc4453748f8b0ca687a2ddea8f650ab75b4c5bec
npm notice integrity: sha512-V+RHefgSXWB/Q[...]Qm/FP3BNcaL9g==
npm notice total files: 3
npm notice
- dzmtest@1.0.0
dengzemiaodeMacBook-Pro:DZMTest dengzemiao$
- 这样就发布成功了!!!
五、使用刚发布的包
1)、创建一个vue项目,并运行起来。
$ vue create npm-test
2)、在新建的 npm-test 项目中导入 dzmtest 包,npm 命令使用介绍以及区别。
$ npm i dzmtest
dengzemiaodeMacBook-Pro:npm-test dengzemiao$ npm i dzmtest
- dzmtest@1.0.0
added 1 package and audited 1170 packages in 6.872s
41 packages are looking for funding
run npm fund for details
found 0 vulnerabilities
这样就导入成功了!!
算法
-
冒泡排序
-
选择排序
-
快速排序
-
二叉树查找: 最大值、最小值、固定值
-
二叉树遍历
-
二叉树的最大深度
-
给予链表中的任一节点,把它删除掉
-
链表倒叙
-
如何判断一个单链表有环
由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!