构建 NPM 包(一) - 从零开始发布一个简单的 NPM 包
2024-10-17 09:52:03npm
是 node package manager 简写,意为包管理工具。nodejs 中第三方模块都可以叫做包,一般由第三方团队或者个人开发,供其他开发者使用。在平时开发中,我们可以通过封装组件库或者一些工具等等,去提高整个公司团队的开发效率。
一. npm 用户注册
NPM官网(www.npmjs.com) 注册一个账号
需注意:发布时,需要用到用户名、密码、邮箱,也可能需要验证码(NPM 官网会向邮箱发送一个验证码)。
二. 创建项目
2.1 创建 package.json 文件
创建 parse-markdown
目录:
# 创建目录
mkdir parse-markdown
# 进入目录
cd parse-markdown
创建 package.json
文件
npm init
# 或者
npm init -y
npm init 会通过问答的形式,让你输入一些项目名称、版本、描述等信息
npm init -y 中 -y 是 --yes 的简写,不会出现问答形式,会直接生成一个 package.json 文件

package.json 中相关属性说明
name:项目名称
version:包版本
description:描述信息
main:指定入口文件
scripts:脚本命令
repository:源码仓库地址
keywords:关键词
author:作者信息
license:版权类型
dependencies: 依赖项
devDependencies: 依赖项
files: npm发布包时,上传的文件和文件夹,是一个数组
着重说明一下 dependencies
和 devDependencies
:
dependencies
和 devDependencies
都是项目中下载的第三方依赖项,但是两者本意不一致。
(1)dependencies
是指在项目中使用的,打包时,会打包到静态资源的,比如react、vue、momentjs等,通过 npm install --save
下载的依赖项。
(2)devDependencies
是指在项目中使用的,打包时,不会打包到静态资源的,比如webpack、webpack-cli、scss-loader等,通过 npm install --save-dev
下载的依赖项。
files介绍
files 是一个数组,用于在 npm 发包的时候,上传的文件和文件夹。
注意: files 字段中文件夹名直接写名字,不要包含 ./ 字符,否则打包出来的产物不会包含该文件夹。
2.2 创建项目
创建 src 目录和 index.js 文件
mkdir src
cd src
touch index.js
index.js中添加如下代码:
/**
* 格式化字符串中的空白
* @param {*} str 传入参数,string类型
*/
export const formatStringBlankSpace = (str = "") => {
if (typeof str !== "string") {
return "";
}
return str.replace(/s/g, "");
}
三. 发布
3.1 登录 NPM
npm login --registry=https://registry.npmjs.org/

登录时,会出现一直要跳转浏览器,解决方案,参考:https://www.wangyuegyq.top/article?id=sj49utq25f
3.2 发布 NPM 包
npm publish --registry=https://registry.npmjs.org/

如果遇到,上传 NPM 包时,报: Package name too similar to existing package xxx,参考:https://www.wangyuegyq.top/article?id=ixe6b0m109p