【制作npm包1】申请npm账号、认识个人包和组织包

news2024/10/6 8:40:24

概述

在开发当中经常有一种现象,重复代码写了N多遍,再次写同样的逻辑就再次翻查以前的代码逻辑。效率低下且容易出错,封装一个npm包的价值也不仅仅是给别人用,封装一套属于自己或者本部门的npm包也是相当有必要。
也许经常看到一个项目的根目录之下有package.json这个文件,很多人可能曾经疑惑这个文件的作用是什么。除了配置打包命令之外,devDependenciesdependencies区别是什么。并且这些包是怎么发布到公用的网络之上,而我们仅需一条npm包命令就可以安装到本地。

大纲

本文是系列文章, 作者一个橙子pro,本系列文章大纲如下。转载或者商业修改必须注明文章出处

一、申请npm账号、个人包和组织包区别
二、了解 package.json 相关配置
三、 了解 tsconfig.json 相关配置
四、 api-extractor 学习
五、npm包制作完整教程,我的第一个npm包


初识npm网站,学习个人包和组织包

注册npm账号

https://www.npmjs.com/
在这里插入图片描述
输入网站地址可直接看到这个网站,如果还没有见过这个网站,那也是非常不合格的前端工程师了。对于前端工作人员来说,它绝对是我们的衣食父母。中间搜索框,就是搜索npm包的地方,找不到插件的时候,在这里搜一下比百度好使。
点击右上角Sign Up是注册按钮,Sign In是登录,点击注册按钮。
在这里插入图片描述
填写完成,点击Create an Account注册完成,直接登录。有时需要邮箱验证,登录完成先验证邮箱了。
在这里插入图片描述
登录完成之后页面不一样了,左边部分展示最新流行的包,中间是探索部分,右侧则是这个网站的数据。一周几百亿的下载量,确实养活不少人,足以见到本站的强大。我们平时输入npm命令的时候,也对这个数字做出了贡献。

普通包和组织包

点击网站右上角的图像
在这里插入图片描述
再点击Packages,这个页面就是将来要上传包的地方了。
在这里插入图片描述
在这个页面,这两部分比较重要,刚进入的时候左侧显示的包就是普通安装包了,组织安装包则显示在左下角的地方。由于我这里是个老账号,如果没有发布过安装包,那么这块就是一片空白了。

对于普通的npm包而言,在发布的时候不需要进行任何操作,对于组织包而言,发布的时候就得进行额外操作了。

这里简单介绍下组织的创建过程
在这里插入图片描述
点击Organizations旁边的加号按钮
在这里插入图片描述
输入组织名直接点击创建就可以了,如果你钱多也可以点击Buy按钮。

到这里也许还有个疑问,一般的npm 包和组织npm包的区别在哪里,组织包一般会以@v3p/类似的符号开头,而一般的npm包则没有这种。

我们看一个我们常见的项目当中package.json文件,如下所示,@vue它就是一个组织了。
在这里插入图片描述
除了这里的区别,组织包在node_modules下的体现也是不同的。
在这里插入图片描述
像图中这样,@vue所有的安装包,都放在同一个组织文件下面。而一般的包则是直接平铺在文件夹之下。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/887127.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

fastadmin 自定义按钮弹窗不是异步xhr提交

遇到一个奇怪的问题 按官方文档要求,js中也重新绑定事件了 但弹窗出来的表单还不是xhr提交,这为什么? 经过我不断测试发现,如上述的方法名不能带有下划线,蛇形大小写,否则一律不生效。 浪费了我一天半时…

小程序CSS button按钮自定义高度之后不居中

问题&#xff1a; 按钮设置高度后不居中 <view><button class"btn1" size"">Save</button> </view> page {font-size: 30rpx; }.btn1 {margin-top: 100rpx;height: 190rpx;background: linear-gradient(90deg, #FF8A06, #FF571…

webSocket 聊天室 node.js 版

全局安装vue脚手架 npm install vue/cli -g 创建 vue3 ts 脚手架 vue create vue3-chatroom 后端代码 src 同级目录下建 server: const express require(express); const app express(); const http require(http); const server http.createServer(app);const io req…

微信小程序:模板使用

目录 模板的优点&#xff1a; 一、静态模板创建 二、静态模板使用 1.*.wxml引入模板 2.模板使用 3.*.wxss引入模板的样式 三、动态模板创建 四、动态模板使用 1.*.wxml引入模板 2.模板使用 3.*.js定义动态数据 五、结果展示 总结 模板的优点&#xff1a; 有利于保持网…

第二章 搜索 No.1BFS之Flood Fill与最短路模型

文章目录 Flood Fill算法1097. 池塘计数1098. 城堡问题1106. 山峰和山谷 最短路模型1076. 迷宫问题188. 武士风度的牛1100. 抓住那头牛 Flood Fill算法 可以在线性时间复杂度内&#xff0c;找到某个点所在的连通块 想象一个矩阵&#xff0c;有洼地和高地&#xff0c;选择一个洼…

经验分享:企业数据仓库建设方案总结!

导读 在企业的数字化转型浪潮中&#xff0c;数据被誉为“新时代的石油”&#xff0c;而数据仓库作为数据管理与分析的核心基础设施&#xff0c;在企业的信息化建设中扮演着重要的角色。本文将深入探讨企业数据仓库建设过程中所遇到的问题以及解决经验&#xff0c;为正在筹备或…

微信程序 自定义遮罩层遮不住底部tabbar解决

一、先上效果 二 方法 1、自定义底部tabbar 实现&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 官网去抄 简单写下&#xff1a;在代码根目录下添加入口文件 除了js 文件的list 需要调整 其他原封不动 代码&#xf…

电脑键盘打不了字按哪个键恢复?最新分享!

“有没有朋友知道电脑键盘为什么会莫名其妙就打不了字&#xff1f;明明用得好好的&#xff0c;突然就打不了字了&#xff0c;真的让人很迷惑&#xff01;有什么方法可以解决吗&#xff1f;” 电脑键盘为我们的办公提供了很大的方便&#xff0c;我们可以利用键盘输入我们需要的文…

如何用树莓派Pico针对IoT编程?

目录 一、Raspberry Pi Pico 系列和功能 二、Raspberry Pi Pico 的替代方案 三、对 Raspberry Pi Pico 进行编程 硬件 软件 第 1 步&#xff1a;连接计算机 第 2 步&#xff1a;在 Pico 上安装 MicroPython 第 3 步&#xff1a;为 Thonny 设置解释器 第 4 步&#xff…

深度学习实战48-【未来的专家团队】基于AutoCompany模型的自动化企业概念设计与设想

大家好,我是微学AI,今天给大家介绍一下深度学习实战48-【未来的专家团队】基于AutoCompany模型的自动化企业概念设计与设想,文本将介绍AutoCompany模型的概念设计,涵盖了AI智能公司的各个角色,并结合了GPT-4接口来实现各个角色的功能,设置中央控制器,公司运作过程会生成…

GitKraken保姆级图文使用指南

前言 写这篇文章的原因是组内的产品和美术同学&#xff0c;开始参与到git工作流中&#xff0c;但是网上又没有找到一个比较详细的使用教程&#xff0c;所以干脆就自己写了一个[doge]。文章的内容比较基础&#xff0c;介绍了Git内的一些基础概念和基本操作&#xff0c;适合零基…

iOS申请证书(.p12)和描述文件(.mobileprovision)

打包app时&#xff0c;经常会用到ios证书&#xff0c;但很多人都苦于没有苹果电脑&#xff0c;即使有苹果电脑的&#xff0c;也会觉得苹果电脑操作也很麻烦&#xff0c;这里记录一下&#xff0c;用香蕉云编&#xff0c;申请证书及描述文件的过程。 香蕉云编的地址&#xff1a;…

uniapp 上传比较大的视频文件就超时

uni.uploadFile&#xff0c;上传超过10兆左右的文件就报错err&#xff1a;uploadFile:fail timeout&#xff0c;超时 解决&#xff1a; 在manifest.json文件中做超时配置 uni.uploadFile({url: this.action,method: "POST",header: {Authorization: uni.getStorage…

深入理解 Flutter 图片加载原理

作者&#xff1a;京东零售 徐宏伟 来源&#xff1a;京东云开发者社区 前言 随着Flutter稳定版本逐步迭代更新&#xff0c;京东APP内部的Flutter业务也日益增多&#xff0c;Flutter开发为我们提供了高效的开发环境、优秀的跨平台适配、丰富的功能组件及动画、接近原生的交互体验…

wkhtmltopdf 与 .Net Core

wkhtmltopdf 是使用webkit引擎转化为pdf的开源小插件. 其有.NET CORE版本的组件,DinkToPdf,但该控件对跨平台支持有限。 故打算在Linux上安装相关插件直接调用. 准备工作 虚拟机&#xff1a;Linux version 3.10.0-1160.el7.x86_64 wkhtmltox开发包&#xff1a;wkhtmltox_0.12…

【数据结构】链表常见题目-ToDone

文章目录 合并两个有序链表反转链表链表内指定区间反转复制带随机指针的链表环形链表环形链表II相交链表移除链表元素链表中倒数第k个节点链表分割链表的回文结构链表的中间节点旋转链表链表排序链表求和 (逆序求)链表求和II (正序求)重排链表链表的奇偶重排奇偶链表反转链表II…

V2X——行动胜于概念

摘要&#xff1a; 本文从信号灯服务入手&#xff0c;简单介绍了车路协同工程化落地过程中的一些关键问题和解决方案&#xff0c;包括设备接入、V2X消息层编解码、C-V2X通信&#xff0c;车端消费以及车路协同安全防护等&#xff0c;类似的问题还有很多&#xff0c;需要从业者做…

打开vim的语法高亮

在一个Ubuntu中自带的vim版本是8.2.4919&#xff0c;默认就是开始了语法高亮的&#xff0c;打开一个Java文件效果如下&#xff1a; 它不仅仅对Java文件有语法高亮&#xff0c;对很多的文件都有&#xff0c;比如vim的配置文件也有语法高亮&#xff0c;有语法高亮时读起来会容易…

re学习(33)攻防世界-secret-galaxy-300(动态调试)

下载压缩包&#xff1a; 下载链接&#xff1a;https://adworld.xctf.org.cn/challenges/list 参考文章&#xff1a;攻防世界逆向高手题之secret-galaxy-300_沐一 林的博客-CSDN博客 发现这只是三个同一类型文件的三个不同版本而已&#xff0c;一个windows32位exe&#xff0…

Webpack node、output.jsonpFunction 配置详解

Webpack node、output.jsonpFunction 配置详解 最近尝试给一些用到 webpack 的项目升级到最新 webpack5 版本&#xff0c;其中遇到了一些问题&#xff0c;我挑了两个比较典型的问题&#xff0c;其中主要涉及到了 webpack 的 node 属性跟 output.jsonpFunction &#xff08;web…