npm使用全攻略(如何发布属于自己的npm包)

简介: npm使用全攻略(如何发布属于自己的npm包)

目录


前言


作为一个前端开发者,我们要学会自己编写一些开发工具模块,也可以自己编写一些组件,甚至可以通过自己的能力编写一个框架出来,但是这都需要我们能够灵活的管理我们的包,本文主要介绍npm如何进行登录并上传包、更新包、撤销包等内容。


创建项目


新建文件夹,比如npm-test。


cd进项目文件夹位置,npm init -y 创建前端项目,会生成package.json文件。

npm init -y

编写代码


package.json对象中的main属性就是npm包入口模块,默认是index.js,因此我们可以在项目中创建index.js,实现自己需要的功能模块。

//index.js
export const add = (a, b) => {
    return a + b
}
export const del = (a, b) => {
    return a - b
}
export {add, del}

设置npm源与npm登录


  1. 上传npm包,必须要设置默认npm源并登录。
  2. 因为下载时淘宝源更快,因此切换来切换去很很不方便,建议没有使用nrm的安装一下nrm管理npm源。
npm i nrm -g

nrm ls可以列出常用源,只需要nrm use就可以快速切换npm源了

image.png

比如我们现在需要登录,因此可以切换去npm源,也就是使用nrm use npm即可

image.png

然后npm login进行登录,登录前需要在npm官网注册一个账号。

image.png

上传


  1. 根目录运行npm publish
npm publish

可能会报错You do not have permission to publish "xxxx"说明该包名被用过了,因此我们需要改名字,去修改package.json的name属性,比如我改成不易重复的名字用于测试npm-test-moon,再次上传。

没有报错就成功了。

下载测试


下载自己上传的包名npm i npm-test-moon。

新建一个test.js文件测试,node test.js执行。

//test.js
import {add,del} from 'npm-test-moon'
console.log(add(1,2))//3

更新npm包


更新内容以后再执行npm publish,可能会报错You cannot publish over the previously published versions,每次更新包上传,必须要修改版本。

修改package.json的version属性为1.0.1,再次上传即可成功。

三个数字从左到右分别代表主版本号、次版本号、修订号。

主版本号(major):当你不兼容旧版本的新版本。一般我们将原有内容颠覆就修改主版本号。

次版本号(minor):当你做了兼容前一个版本的功能性新增。不影响原有功能增加新功能修改的都是次版本号。

修订号(patch):当你做了兼容前一个版本的问题修正。修复一些bug,进行一些优化就修改修订号。

撤销npm包


假如刚发布的1.0.1的包存在问题,我们需要进行撤销, npm deprecate 包名@版本号 提示信息。


npm deprecate npm-test-moon@1.0.1 这个版本存在问题,请下载1.0.0版本

1

撤销之后,下载默认下载最新1.0.1版本会出现提示,会自动下载前一个版本,即使该版本源码还在,但是导出内容仍是上一个版本的。

image.png

注意,只在发布24小时内才可以进行撤销,且撤销过的版本号不再可以使用,比如我们1.0.1版本撤销了,下次发布新版本,必须得修改1.0.2了,不可以再使用1.0.1了。


es6转es5兼容性处理


有些人平时编写模块时比较喜欢使用es6代码,但是如果希望自己的模块既能被es6形式import导入,也希望能同时兼容commonjs模块的require导入,我们在上传自己的npm包时就得考虑好这个问题。

如需了解请移步另一篇文章:nodejs ES6模块使用 以及 ES6代码转ES5兼容性处理。


相关文章
|
4月前
|
前端开发 小程序 API
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
【微信小程序】-- 使用 npm 包 - API Promise化(四十二)
|
4月前
|
资源调度 小程序 前端开发
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
【微信小程序】-- 使用 npm 包 - Vant Weapp(四十一)
|
4月前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
361 1
|
4月前
|
资源调度 小程序 前端开发
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
【微信小程序】-- npm包总结 --- 基础篇完结(四十七)
|
1月前
NPM——删除已发布的包
NPM——删除已发布的包
45 1
|
2月前
|
运维 Kubernetes Java
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
本合集将整理呈现用户在使用过程中遇到的报错及其对应的解决办法,包括但不限于账户权限设置错误、项目配置不正确、代码提交冲突、构建任务执行失败、测试环境异常、需求流转阻塞等问题。阿里云云效是一站式企业级研发协同和DevOps平台,为企业提供从需求规划、开发、测试、发布到运维、运营的全流程端到端服务和工具支撑,致力于提升企业的研发效能和创新能力。
阿里云云效操作报错合集之npm包已经发布到了制品仓库,但流水线中拉取依赖时出现404错误,该如何排查
|
1月前
|
JavaScript 前端开发 开发者
从零到一:教你如何发布自己的npm插件包
从零到一:教你如何发布自己的npm插件包
|
1月前
|
JavaScript
GitHub——自动发布NPM包
GitHub——自动发布NPM包
12 0
|
4月前
|
前端开发 JavaScript 数据安全/隐私保护
从0到1开发一个自己的npm包完整过程
创建自己的 npm 包涉及六个步骤:1) 注册 npm 账号;2) 使用 `npm init` 初始化项目,确保 package.json 的 name 唯一且 private 为 false;3) 开发项目,可封装 UI 组件、函数库或命令行工具;4) 本地调试,通过 `npm link` 在项目中测试;5) `npm login` 登录账号,可能需切换至官方仓库;6) 使用 `npm publish` 发布项目。注意版本号递增,无意义的包不建议发布。
164 2
从0到1开发一个自己的npm包完整过程
|
4月前
|
JSON 小程序 前端开发
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议
微信小程序按需引入 vant 组件,自动清除项目中未使用的 vant 组件,减少代码包大小,避免因未使用到的 vant 组件触发隐私协议提交审核时被拒
67 1
小程序中使用npm安装vant组件实现按需引入减少代码包大小,避免触发用户隐私协议