npm 上传发布自定义组件以及使用详细流程(Vue包含),只需一篇文章吃透前端多线程技术

131 阅读2分钟
二、注册 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 中的 version1.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

这样就导入成功了!!

算法

  1. 冒泡排序

  2. 选择排序

  3. 快速排序

  4. 二叉树查找: 最大值、最小值、固定值

  5. 二叉树遍历

  6. 二叉树的最大深度

  7. 给予链表中的任一节点,把它删除掉

  8. 链表倒叙

  9. 如何判断一个单链表有环

由于篇幅限制小编,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!

开源分享:docs.qq.com/doc/DSmRnRG…