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

概述

开发当中经常有一种现象,重复代码写了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所有的安装包,都放在同一个组织文件下面。而一般的包则是直接平铺在文件夹之下。

原文地址:https://blog.csdn.net/a942242856/article/details/132183148

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_41998.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注