从0开始发布npm 包

最新推荐文章于 2022-07-14 10:29:51 发布
最新推荐文章于 2022-07-14 10:29:51 发布
阅读量252 收藏 1
点赞数
分类专栏： npm 文章标签： node.js npm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZhaoQM_script/article/details/106608845
版权

从0开始发布npm 包

从0开始发布npm 包

记录一次学习npm包从0构建到发布的过程，我大概分了几个过程

  1. 创建npm帐号
  2. 搭建项目包的参数
  3. 创建方法
  4. 发布到npm
  5. 在webpack项目中引入放到npm中的方法
  6. npm方法的版本更新和重新发布
  7. 删除npm方法的版本和彻底删除npm的方法

创建npm帐号

在这里插入图片描述

搭建项目包的参数

进入到你构建项目的文件夹内打开cmd，输入命令‘ npm init ’，package name自定义个一个，其他的参数可以不用填，一路enter到最后is this ok时输入yes，执行完毕就会出现一个package.json的文件，里面就时你构建项目包时的对应参数
在这里插入图片描述
在这里插入图片描述

创建方法

我们这里没有具体的写某个方法，就暂时用一个index.js文件来代替
在这里插入图片描述
简单的执行一个排序方法，然后export导出该方法。执行npm install -g命令，检查代码是否报错，没有问题就会是正常的一个提示
在这里插入图片描述
然后执行npm link命令，执行完毕之后在文件夹内就会多出一个page-lock.json文件在这里插入图片描述
前期工作做完之后就准备发布

发布到npm

输入npm login，输入在npm上创建的用户名/密码和邮箱
在这里插入图片描述
如果报错提示出现 ’ you must verify your email before publishing a new package '就是要到你的邮箱里面去验证你的npm邮箱地址
然后执行npm publish 命令，执行成功之后这个包就发布成功了
在这里插入图片描述
进入到你的npm，点击profile就会看到你的包已经发布上去了，并且还有你这个包的安装的指令
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

戴竹蜻蜓穿过那森林
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手教你发布一个无依赖多类型高质量的键盘npm包
weixin_34218890的博客
05-20 159
写在前面 没有发布过npm包的同学，可能会对NPM对开发有一种蜜汁敬畏，觉得这是一个很高大上的东西。甚至有次面试，面试官问我有没有发过npm包，当时只用过还没写过，我想应该挺难的，就小声说了没有，然后就让我回去了o(╯□╰)o。 其实，在现在的我看来，npm包就是一个我们平时经常写的一个export出来的模块而已，只不过跟其它业务代码耦合...
从0开始创建自己的npm包
zhangqiang
05-09 113
创建一个文件夹 util初始化 package.json。
从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化
03-27 2941
从零搭建前端开发环境（零）——基础篇：1.npm、git及项目初始化 从零搭建前端开发环境（零）——基础篇：2.webpack生产与开发环境配置 从零搭建前端开发环境（零）——扩展篇：3.jest单测 从零搭建前端开发环境（零）——扩展篇：4.eslint统一代码规范 从零搭建前端开发环境（零）——终极篇：5.构建自己的前端脚手架 本文主要讲一些node、npm、git的一些基础知识，因为...
idea 配置npm自启动后跳转到0.0.0.0的问题解决
爱的叹息的专栏
07-14 1372
结果浏览器地址显示0.0.0.0 0.0.0.0实际的地址应该是 原来是需要修改vue里的配置，找到 在host:'0.0.0.0'后面修改为‘127.0.0.1’ 修改后如下保存重新启动就可以了
基于vue如何发布一个npm包的方法步骤
10-17
在发布npm包之前，确保你已经在npm官网注册了一个账号。然后在项目根目录运行`npm login`登录你的账号。修改`package.json`中的`main`字段，指向你的主入口文件（通常是`index.js`）。如果有必要，还可以添加`...
发布一款npm包帮助理解npm的使用
10-17
首先，创建一个新的项目是发布npm包的第一步。在终端中，使用`mkdir`命令创建一个名为`math-tool_demo`的文件夹，然后进入该文件夹。接着，执行`npm init`初始化`package.json`文件，这个文件包含了项目的元数据，如...
发布自己的npm包并使用
09-19
二、发布npm包 1. 注册npm账号：访问npm官网（https://www.npmjs.com/）注册一个账号，完成邮箱验证。 2. 登录npm：在命令行中使用`npm login`命令登录你的npm账号。 3. 配置权限：如果你打算发布私有包，可以...
从零使用TypeScript开发项目打包发布到npm
10-15
2. **创建`.npmignore`文件**：类似于`.gitignore`文件，用于指定在发布npm包时不希望包含的文件或目录。通常，`node_modules`会被自动忽略，但还需要手动添加其他不需要发布的文件或目录。 3. **调整`package.json...
npm发布自己的插件包
最新发布
04-04
发布npm包 新建文件目录例如npm-test，目录中打开命令行 初始化package.json文件 npm init name：作为发布包的名字 version：版本号 main：入口文件名 根目录创建index.js，输入一些代码 登录npm账号 npm adduser 按...
从零开始发布自己的NPM包
u012384510的博客
02-17 662
大家好，我是若川。持续组织了6个月源码共读活动，感兴趣的可以点此加我微信 ruochuan02参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构...
npm启动vue报错 Error: listen EACCES: permission denied 0.0.0.0:8085
一只小蚂蚁的自白
05-25 3120
报错日志： D:\****\***>npm run dev > vue-ytd-cli-project@0.0.1 dev *** > node --max_old_space_size=4096 build/dev-server.js 。。。。。。 > starting dev server... events.js:292 throw er; // Unhandled 'error' event ^ Error: listen EACCES: p...
Error: listen EACCES 0.0.0.0:80 npm ERR! Darwin 17.3.0
随笔记录-分享&记忆
02-02 1923
> node build/dev-server.js events.js:160       throw er; // Unhandled 'error' event       ^ Error: listen EACCES 0.0.0.0:80     at Object.exports._errnoException (util.js:1022:11)     at exp
从零开始写一个npm包,一键生成react组件(偷懒==提高效率)
weixin_33961829的博客
08-10 274
前言 最近写项目开发新模块的时候，每次写新模块的时候需要创建一个组件的时候（包含组件css,index.js,组件js）,就只能会拷贝其他组件修改名称 ，但是写了1-2个后发现效率太低了，而且极容易出错,所以自己写一个npm包来减少工作量,下面就一步一步来创建一个属于自己的npm仓库 首先第一步创建一个package.json文件,打开终端,输入以下命令: npm init 复制代码然后会依...
nodeJS踩坑-记本地地址127.0.0.1与0.0.0.0的区别
02-15 8021
注：本文和Node.js本身关系不大，只是这个这个知识点由学习Node时候引出，主要是关于网络的一个小知识点 问题的提出 nodejs中创建web服务时，作为小白的我自然是跟着官网文档走起 var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-T
npm 安装 elementUI 踩坑- 报错npm ERR! cb() never called!
weixin_41796631的博客
05-09 3700
来源：https://blog.csdn.net/qq_38822390/article/details/82188365 在vue项目中引入饿了么elementUI组件的步骤之中，出现以下的错误： D:\my-project-first>npm i element-ui -S Unhandled rejection RangeError: Maximum call stack siz...
从0开始发布一个无依赖、高质量的npm
web前端开发
11-26 180
作者 |simbawus原文 |https://github.com/simbawus/blog/issues/12写在前面没有发布过npm包的同学，可能会对NPM对...
npm脚本学习（二）启动:webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.j
Cynthia_Yue27的博客
06-22 2595
一、webpack-dev-server webpack-dev-server的官方介绍是：将webpack与提供实时重载的开发服务器一起使用。这仅应用于开发。也就是给我们提供一个可以实时重载的服务器，不需要我们改动代码后手动刷新，当然其中还提供了很多参数配置，有不同的作用。 const path=require('path') const webpack=require('webpack') // 启用热更新 第二步 module.exports={ entry:path.join(__dirna
npm启动报错——端口被占用
君当自强
08-20 3552
两种打开Shell窗口的方式 1.直接右键，使用Git Bush窗口，在这个窗口中用npm start启动，不管你是直接点“X”关闭，还是按两次Ctrl+C关闭，都会造成下次启动，端口被占用而启动失败。 2.先按着“Shift”再右键，此时会多出一个选项：在此处打开Powershell窗口，点击这个启动shell窗口，在这里边用npm start启动，按两次Ctrl+C关闭后，再启动不会报...
gitlab 发布私有npm包
05-25
5. 在项目中创建您的npm包，并使用`npm publish`命令将其发布到GitLab。 现在，你可以通过GitLab访问您的npm包并与您的团队共享它。注意，如果您想使用私有模块，您需要在`.npmrc`文件中添加GitLab存储库的URL。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值