npm包开发&发布详细流程_npm包开发步骤-CSDN博客

本文链接：https://blog.csdn.net/agaric303/article/details/145365058

本文介绍npm方法包创建-发布-更新-下载-使用的详细流程，不包含组件库包的相关开发

npm官网：npm | Home

作者学习时发布的包：dt-tm - npm（可能还会更新）

查看npm包的下载情况：npm-stat: download statistics for NPM packages

一、环境准备

需要安装Node.js和npm

版本查看：node -v，npm -v

二、开发流程

1.项目创建

1.命令行输入：

npm create vite

2.选择模板：一般开发方法库选择第一个Vanilla模板即可

3.调整文件结构

2.相关配置

1.package.json

{
  "name": "npm-package-name",// 包名，npm发布包名不可重复
  "private": false,// 是否为私有包，false表示公开包
  "version": "0.0.1",// 版本号，版本号提升才能重新发布
  "type": "module",// 指定项目的模块类型为模块
  "files": [// 指定发布的文件夹
    "dist"
  ],
  "main": "dist/npm-package-name.cjs",// 指定项目的主入口文件（CommonJS）
  "module": "dist/npm-package-name.js",// 指定项目的模块入口文件（ES Module）
}

2.创建vite.config.js，并加入配置

import { defineConfig } from 'vite'
export default defineConfig({
  build: {
    outDir: 'dist', // 构建输出目录设置为'dist'
    target: 'es2020', // 构建目标设置为'es2020'
    lib: {
      entry: 'main.js', // 设置库的入口文件
      formats: ['es', 'cjs'], // 定义导出格式 包含 'es' 模块格式，适用于 ES6 及以上版本，包含 'cjs' 模块格式，适用于 CommonJS 规范
      name: ''
    },
  },
})

3.功能开发

1.在src/time.js文件中封装功能方法并导出：

export function getNewDate() {
  return new Date();
}

2.入口文件main.js直接引入并导出

import { getNewDate } from "./src/time.js";
export {getNewDate}

3.编写README.md文件

4.运行调试

npm run dev即可运行，可以打开index.html查看，以及浏览器调试工具Dev Tools进行调试

5.打包发布

1.准备工作：换源+登录

// 官方镜像源
npm config set registry https://registry.npmjs.org/
// 检查当前npm源
npm config get registry
// 登录npm
npm login
// 查看当前登录用户名
npm whoami

2.打包，生成dist文件夹

npm run build

3.首次发布包，发布完成后即可在官网看到已发布的包

npm publish

三、更新npm包

1.修改版本号：可以使用命令，也可以直接修改package.json文件中version字段版本号。

后续更新不修改版本号无法进行发布

命令	功能	示例
npm version patch	增加修订号（即第三位数字），用于小的bug修复	0.0.1->0.0.2
npm version minor	增加次版本号（即版本号的中间一位），用于添加了向下兼容的新功能时	1.2.7->1.3.7
npm version major	增加主版本号（即版本号的第一位），用于做了不兼容的API更改时	0.3.9->1.3.9

2.登录并发布

// 如果已经登录过，则已保持登录状态无需再次输入命令
npm login
// 发布
npm publish
// 查看已发布版本
npm view npm-package-name versions

注意：本地Git working directory not clean不能更新

四、下载使用更新

1.下载：和其他npm包一样

npm i npm-package-name

2.引入使用

home.vue

<script>
import { getNewDate } from 'npm-package-name'
export default {
  mounted() {
    console.log(getNewDate()) // Thu Jan 23 2025 17:56:01 GMT+0800 (中国标准时间)
  }
}
</script>

3.更新包

在package.json手动修改版本号并npm i；

或

// 更新到最新版本（包括大版本更新）
npm install <package-name>@latest
// 更新到最新的次要版本或补丁版本
npm update <package-name>
// 更新所有包
npm update
// 检查当前安装的包哪些有更新版本
npm outdated