Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >快来把自己的代码放到npm上吧~

快来把自己的代码放到npm上吧~

作者头像
用户9078190
发布于 2022-10-25 13:29:00
发布于 2022-10-25 13:29:00
79300
代码可运行
举报
文章被收录于专栏:知码前端知码前端
运行总次数:0
代码可运行

前言

按照惯例,介绍一下 vue-admin-work 框架,非常感谢大家的支持和鼓励。我们会继续努力完善,为广大前端小伙伴提供更好的服务。

演示地址:http://qingqingxuan.gitee.io/vue-admin-work/

什么是npm

看一下官方介绍:

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:

  • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
  • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
  • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

当我们在电脑上安装完node之后,npm服务就安装完成了。这里不多介绍概念性的东西了,总之就是一个组织,上面有好多别人写好的代码供我们使用,当然,我们也可以把自己的代码放上去供别人使用。如果对这个还不了解,建议您先去网上查一下资料再来阅读下面的内容哦~~~

准备工作

如果我们想要把自己的代码放在npm,供别人下载使用,首先得先有源码啊。在开发 vue-admin-work的时候 ,在登录页面中有一个滑动验证组件,为了方便后期的项目使用,我就把它抽取成一个项目,开发完之后就放到了npm上了。以后我们在别的项目使用的时候就直接可以直接

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install vaw-verify --save

就好了。是不是很方便的,大大提高了重用性和维护性。

另外,如果想要在npm发布源码,还得需要在npm上注册一个账号,这个没啥好说的,就和github一样。官网链接如下:

npm: https://www.npmjs.com/

打开如下:

点击 sign up按钮一步步注册账号就好。

发布

这里假定您已经有一个项目要发布到 npm上,用 vscode打开项目(本人比较喜欢这个开发工具,其它开发工具也可以的哦)。打开底部终端:

输入如下命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm login

// 输入完以上命令,会让你输入你注册时用的 UsernamePassword,和 Email。如实填写就好。填写好所有信息,回车就好。登录成功会有如下提示:Logged in as xxxxx on https://registry.npmjs.org/.

到这里就说明登录成功,可以进行发布了。

然后再在终端里输入

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm publish

等他发布完就ok啦~

添加忽略文件

.gitignore 一样,我们在发布的时候,不想把所有的文件都发布,有些文件是不需要发布的,这个时候就需要在项目的根目录下面创建一个文件:.npmignore

打开添加要忽略的文件就行了。我的文件内容如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.DS_Store
node_modules
/dist
/public
/src
/lib/*.map
babel.config.js
.gitignore
README.md
package-lock.json


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

文件内容,根据个人的情况而定。

完成

到这里就完成了对项目的发布,当我们使用命令:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
npm install xxxx

添加依赖的时候,项目就会从 npm 上下载下来放进项目的 node_modules目录中哦。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-05-25,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 知码前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
🚀手把手教你从零开始开源插件🚀
在定义vue的插件的时候,需要有install方法在里面做你想做的事情,然后在index.js中暴露出去,比如:
饼干_
2022/09/19
4190
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
在此之前,你需要去npm官网注册一个属于自己的账号,记住自己的账户名以及密码、邮箱,后面会用的到。
Vam的金豆之路
2021/12/01
1.1K0
npm发布包以及更新包还有需要注意的几点问题(这里以发布vue插件为例)
你细品Git分区、配置与日志,不会就不要敲代码了
曾经听到过这样一句话:不会「git」就不要敲代码了。细细品味确实有其中的道理,可能是当事人代码被强行覆盖后的叹息吧!
帅地
2020/06/28
7850
升级Jenkins:发布和代理 VUE 项目
书接上回,在之前的几篇文章中,我们主要通过几篇文章来讲解了如何通过一个镜像,快速的创建Jenkins容器实例,然后搭建我们的持续集成和持续部署的平台,相关的文章呢如下,我这里简单列举一下,省得大家查找了:
老张的哲学
2022/04/11
5520
升级Jenkins:发布和代理 VUE 项目
2.寻光集后台管理系统-创建项目
这时候的项目结构如下,因为虽然代码是前后端分离的,但是人只有一个,所以后面会把前后端代码放到一个项目里面,把文件夹名称修改为backend
zx钟
2022/12/02
3880
2.寻光集后台管理系统-创建项目
git 删除已提交的文件夹
风花一世月
2024/03/19
1600
【打造前端现代化规范工程】Vite + ESLint + Husky + Commitlint + Lint-staged
本文虽然使用 Vite 创建了一个 Vue3 + TS 的项目,但其实文中涉及的内容和技术栈并没有关系,主要是结合 ESLint ,Husky,等第三方库实现比较规范的现代化前端工程,可应用于任何技术栈的项目中
一尾流莺
2023/04/23
1.3K0
【打造前端现代化规范工程】Vite + ESLint + Husky + Commitlint + Lint-staged
NPM 介绍
NPM 是随同 NodeJS 一起安装的包管理工具,能解决 NodeJS 代码部署上的很多问题,常见的使用场景有以下几种:
acc8226
2022/05/17
8680
一文全面了解pnpm、yarn、cnpm、npx、npm的使用(强烈建议收藏)
NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种:
小码匠
2023/08/31
6K0
一文全面了解pnpm、yarn、cnpm、npx、npm的使用(强烈建议收藏)
Mac上Vue启程
vue.js有著名的全家桶系列,包含了vue-router,vuex, vue-resource,再加上构建工具vue-cli,就是一个完整的vue项目的核心构成。
码客说
2019/10/22
1.9K0
Mac上Vue启程
vue(16)vue-cli创建项目以及项目结构解析[通俗易懂]
接着会问我们是否使用history router,其实直白来说就是是否路径带 # 号,建议选择 n,否则服务器还要进行配置
全栈程序员站长
2022/09/16
1K0
vue(16)vue-cli创建项目以及项目结构解析[通俗易懂]
Vue项目dist文件夹不能上传至github问题
本地demo上传至github五步曲 https://www.jianshu.com/p/40f48a007c50
王小婷
2019/05/13
2.3K0
Vue项目dist文件夹不能上传至github问题
日常开发中Git使用:常用命令汇总
Git其实就是一个开源的分布式版本控制系统,它可以有效、高速地处理从很小到非常大的项目版本管理,也是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件,其实Torvalds开始着手开发Git是为了作为一种过渡方案来替代BitKeeper。
三掌柜
2024/09/07
2081
日常开发中Git使用:常用命令汇总
Vue3+Vite+Ts+Antd2.x项目搭建
NPM npm init @vitejs/app Yarn yarn create @vitejs/app 项目构建(Ts版) npm 6.x npm init @vitejs/app vue-admin-pro --template vue-ts npm 7+, 需要额外的双横线: npm init @vitejs/app vue-admin-pro -- --template vue-ts yarn yarn create @vitejs/app vue-admin-pro --template
前端小tips
2021/11/29
1.4K0
Vue3+Vite+Ts+Antd2.x项目搭建
一. 项目环境及初始化项目
我们使用命令行工具进入到 ifimcat/packages目录下,使用create-reat-app admin.ifimcat命令创建 admin.ifimcat后台管理项目部分;使用create-reat-app ifimcat.con命令创建 ifimcat.com博客官网项目部分;使用nest new server.ifimcat命令创建后端服务项目部分。然后等待命令运行结束。
路过的那只狗
2020/04/17
7600
Node.js学习笔记(一)——Node.js概要、NPM与package.json
Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。
张果
2022/09/28
2.6K0
Node.js学习笔记(一)——Node.js概要、NPM与package.json
webpack 初识配置文件
不知道你思考过一个问题没有,我们在使用vue和react脚手架创建的项目中,并没有见到个webpack的出现,这是为什么?
用户4793865
2023/01/12
4600
webpack 初识配置文件
在本地和CI/CD中支持npm免登录发布
本文是 基于Vite+AntDesignVue打造业务组件库[2] 专栏第 9 篇文章【在本地和CI/CD中支持npm免登录发布】,专门分享一下如何在 npm 发包时支持免登录发布,并同时支持在本地和CI/CD中操作发布流程。
程序员白彬
2023/03/02
1.3K0
在本地和CI/CD中支持npm免登录发布
如何使用git命令上传项目至github
这篇文章系统地介绍了Nacos作为Dynamic Naming and Configuration Service,是构建云原生应用的重要工具,提供了动态服务发现、配置管理和服务管理功能。其总体架构包含命名服务、配置服务和元数据服务,三大组件协同工作,支持微服务架构。Nacos支持单机、集群和多集群模式,满足不同场景需求。服务注册与发现、配置管理和元数据管理是Nacos的核心功能,实现了服务的动态管理和配置的灵活更新。整体来看,Nacos功能全面,易于使用,是微服务架构中不可或缺的一部分
炑焽
2024/12/05
1670
使用Yarn workspace,TypeScript,esbuild,React和Express构建 K8S 云原生应用(一)
本文将指导您使用 K8S ,Docker,Yarn workspace ,TypeScript,esbuild,Express 和 React 来设置构建一个基本的云原生 Web 应用程序。在本教程的最后,您将拥有一个可完全构建和部署在 K8S 上的 Web 应用程序。
为少
2021/05/27
4.2K1
推荐阅读
相关推荐
🚀手把手教你从零开始开源插件🚀
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验