使用npm发布包

npm模块发布指南
最新推荐文章于 2025-05-11 17:24:53 发布
原创 最新推荐文章于 2025-05-11 17:24:53 发布 · 620 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#npm

本文详细介绍如何通过npm平台注册账户、登录、创建并发布模块。包括使用npm init命令初始化项目、编写示例模块代码、发布及撤回模块等关键步骤。

第一步注册npm
登录https://www.npmjs.com/
这里写图片描述

这里写图片描述

第二步登录npm
进入你要编写的模块目录下.
这里写图片描述

npm login

这里写图片描述
密码是不显示的，所以不要担心。自信回车。
这里写图片描述
到这一步你已经登陆上。可以使用

npm whoami

来查看登录用户.

第三步登录编写模块
使用

npm init

来创建工程文件package.json
如果想简单点，可以

npm init --yes

新建index.js,开始编写模块;

//index.js 随便写了一个函数
module.exports = function(a,b){
    return a+b;
};

到这一步，模块已经写好，只差发布了.

npm publish

发布模块
这里写图片描述
+号显示已经发布模块到npm上。此时你上npm上去搜你的模块
这里写图片描述
当然如果你想删除使用

npm unpublish --force

然后就删除了.

把自己的前端插件项目上传至 npm 详细步骤
🏆 前端领域优质创作者
02-07 5153
注意：如果你是 cnpm，请换回 npm，否则无法进行。 登录/注册 npm 官网：https://www.npmjs.com/signup cmd终端登录 注册完成后，打开本地自带的终端，输入以下命令： npm login 依照提示，输入账号密码(密码不会显示出来)与电子邮箱，回车确认，如下图所示： 最后提示 Logged in as XXXXXX on https://registry.n...
html中用npm包
weixin_46370288的博客
02-27 2001
3.输入npm命令安装webpack及webpack-cli， “npm i webpack webpack-cli -D”，然后回车进行下载/安装。当配置项比较多的时候我们直接在package.json的脚本里面直接写会不太方便，所以在根目录下面创建一个webpack.config.js文件专门用来配置webpack。注意打包后的js文件是局部变量 如果要在html中引入js中的变量先去js中把变量改成全局变量。一.用webpack工具打包npm包 到dist下js文件为浏览器能识别的文件。
octo-page:一个简单的 html 页面，使用 npm 包从 octo 样式中获取 SASS 依赖项
07-17
八页 一个简单的 html 页面，使用 npm 包从 octo 样式中获取 SASS 依赖项
发布自己的NPM包
Nick_YangXiaoTong的博客
08-07 512
准备 [ ] 注册NPM账号 https://www.npmjs.com/ PS：注册成功后，邮箱会受到一条验证邮件，不要忘记验证邮箱 [ ] 准备一个空文件夹 为了方便后期维护，建议同步到GIT，可以在GIT创建一个空项目后Clone到本地 [ ] 为自己的NPM包起一个独一无二的名字 可以通过 npm i xxx来测试你的包名是否被占用，如果能...
generator-c:用于发布到 npm 的 CSS 模块的最小 yeoman 生成器
06-04
发电机-c 旨在发布到 npm 的 CSS 模块的最小 yeoman 生成器。 此生成器会提示您： 名称 Github 用户名 推特句柄 包裹名字 包装说明 安装 npm install -g generator-c 用法 $ mkdir package-name && cd $_ $ yo c 然后系统会提示您输入一些用于生成 npm 包的信息。 执照 麻省理工学院 贡献 分叉吧 创建您的功能分支（ git checkout -b my-new-feature ） 提交您的更改（ git commit -am 'Add some feature' ） 推送到分支（ git push origin my-new-feature ） 创建新的拉取请求 由 ( ) 用 <3 制作。
自定义vue组件发布到npm
u012857153的博客
06-23 7783
自定义组件打包发布为什么会有这个想法呢，主要是vue项目中自定义的组件在多个项目中使用。导致修改bug的时候，总是要在项目分支中修改，然后同步到主线上，这样容易导致分支修改后没有同步到主线，慢慢的就会导致组件版本不统一，而导致升级组件很繁琐，最后可能都要去维护多个组件的不同版本，这样不是我们想要的。 所以就打算将组件打包发布到npm上，每个项目中只需要在package.json中修改组件版本即可同
自定义Vue组件打包、发布到npm及使用教程
10-16
在成功打包并配置好npm发布文件后，接下来需要注册一个npm账号，并通过npm login命令登录。登录后，使用npmpublish命令发布npm包。如果遇到登录源错误的问题，可以使用npm config get registry查看当前的登录源，并...
前端npm包发布流程：从准备到上线的完整指南
最新发布
ztK63LrD的博客
05-11 2987
本文详细介绍了如何在npm平台上发布和管理包的全过程，包括账号注册、镜像切换、包的初始化和发布、版本更新及删除等关键步骤。文章还提供了关于包配置的详细说明，如package.json文件的各项配置及其意义，帮助开发者更好地准备和发布npm包。此外，文章还探讨了npm的一些高级功能，如预发布版本的处理、默认安装版本的设置等，旨在提升开发者的发布效率和包的管理能力。通过这些指导和技巧，开发者可以更顺畅地在npm上发布和维护自己的包。
npm发布自己的插件包
热门推荐
来一颗砂糖橘
03-31 1万+
npm发布插件包
npm基于vite制作自己的npm包+ts超详细
07-28
最后，通过`npm publish`命令将项目发布到npm仓库，其他开发者就可以通过`npm install`或`yarn add`命令来安装并使用这个自定义播放器组件。 总结来说，这个项目展示了如何利用现代前端技术栈，包括Vue3、...
发布NPM包详细流程
qq_45799465的博客
08-01 814
首先需要制作一个npm包。按照以下步骤依次执行。相信这一步不需要过多的解释，就是创建了一个文件夹，然后初始化了一下文件夹。然后在生成的package.json文件夹中更改一下自己的配置，例如包名、版本、描述等。然后创建src文件夹，在对应的地方写下你自己的函数即可。
html5开发必备--前端框架集合包
12-10
web-package 实际开发使用 fa-study fa图标库教程 其余为源码备份以及学习
npm创建html项目,使用Vue-cli3.0创建的项目，如何发布npm包
weixin_42626820的博客
06-26 288
使用vue-cli3.0创建的项目，如何发布npm包在使用vue进行项目开发时，如果我们想要发布一个包，有时候会有点迷糊，不知道应该怎么修改脚手架的默认设置。这里记录一下一些常见的操作。创建index.js进行模块的导出将我们需要导出的组件在index.js文件中进行统一导出，可能之前需要进行处理，是先进行全局注册vue.component，还是用户自己注册。import app from './...
npm构建项目html文件,【构建】手把手构建一个VUE项目
weixin_35924765的博客
06-23 713
一、项目准备1.创建目录创建webpackTest文件夹2.初始化创建package.json文件npm init3.创建业务目录webpackTest/app├── css/│ ├── reset.scss├── js/│ ├── home/│ │ ├── index.vue│ ├── router/│ │ ├── index.js│ ├── App.vue│ ...
npm 上传自己的第一个scss样式包
m0_62015496的博客
06-30 480
npm 上 上传自己的第一个scss样式包
一篇文章教会你如何在npm上传自己的包
蛋蛋老公的博客
05-24 5221
1、官网注册 首先要在npm官网注册自己的npm账户，链接：https://www.npmjs.com/ 注：由于是国外的网站，特别特别慢。不要灰心 2、查询是否存在包名 要查看npm官网中是否已有自己准备上传的包名，打开cmd。执行命令 指令：npm view 【你的npm包名】 注：包名上传时会自动转小写，所以你还是用小写的名称吧 如果出现如下图。则表示包名已存在，建议换个其他包名 如果出现以下界面，则表示输入的包名可用。 3、初始化项目 指令： npm init -y 注：文件夹名称一定不能有中文
npm scrpit/node实现静态资源(js/css)复制重命名(版本号)、压缩tar.gz、上传至服务器
Capricorncd
09-25 1969
使用场景：一些插件js包、css样式包等文件较大。由于服务器带宽（1M）限制，每次加载时相当慢，偶尔还能达到20s。所以将静态资源另外部署到第三方平台，如腾讯云对象存储、阿里云、CND等等，后期根据相关接口获取版本号及相关静态资源地址…
详解如何制作自己的js(包)库并上传到NPM
qq_40096030的博客
08-31 5026
去npm官方文档注册账号,并验证邮箱 官网地址:https://www.npmjs.com/ 新建一个文件夹,并命名(名字随意) 在文件夹内执行初始化指令(npm init)并设置包的参数 接着就依次填写, 不想填写的话也可以一路Enter name： 模块名，之后发布之后就可以让用户npm install xxxx来引用你的开源模块了 version： 版本号，语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。 如果只是修复bug..
html引入npm包,详解node.js中的npm和webpack配置方法
weixin_42362885的博客
06-25 4967
概述Node.js用c++语言编写而成的，是一个基于chrome V8引擎的javascript运行环境，让javaScript的运行脱离浏览器服务端，可以使用javaScript语言书写服务器端代码1.使用node来实现一个http服务器下面创建了一个端口为8787的服务器.他与php，java等不同，像php本地还要基于阿帕奇服务器，node.js能用代码快速搭建一个服务器。// 引入http...
npm 发布包
03-28
### 如何通过 npm 发布一个包 要通过 `npm` 发布一个包，需遵循一系列流程来确保发布的成功以及包的质量。以下是关于此过程的具体说明： #### 准备工作 在正式发布前，开发者应完成必要的准备工作以验证包的功能性和兼容性。这包括但不限于运行测试代码以确认功能正常[^2]。此外，可以利用 `npm link` 将开发中的包链接至本地 Node.js 项目中进一步测试其稳定性。 #### 配置 package.json 文件 每个 npm 包的核心配置文件为 `package.json`，它定义了包的元数据及其依赖关系。创建一个新的 npm 包时，可以通过执行以下命令初始化该文件并填写所需信息： ```bash npm init ``` 上述命令会引导用户输入诸如名称、版本号、描述等内容，并最终生成一份基础版的 `package.json` 文件[^3]。 #### 执行发布操作 当一切准备就绪后，即可借助 `npm publish` 命令将构建好的包上传至 npm 官方仓库或指定私有库中。具体语法如下所示： ```bash npm publish ``` 值得注意的是，在首次尝试发布之前可能还需要登录账户或者设置访问权限等相关事宜[^1]。 #### 示例代码展示 下面给出一段简单的 Vue 组件例子作为演示用途，假设我们希望将其封装成独立组件并通过 NPM 分享给其他使用者。 ```javascript // app.vue <template> <div id="app"> <MyFirstComponent :items="cityList"></MyFirstComponent> </div> </template> <script> import MyFirstComponent from './assets/index.js' export default { name: 'app', components: { MyFirstComponent }, data() { return { cityList: [ '北京', '上海', '广州', '深圳' ] } } } </script> ``` 以上即完成了从前期准备到实际部署整个过程中涉及到的关键环节介绍[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值