npm包的开发与发布

npm包的开发与发布

一、准备工作

首先需要确保本地已安装 Node.js 和 NPM，可以通过 node -v , npm -v 命令进行检查。如果没有安装，则需要先下载安装。

二、初始化项目

2.1 初始化：

npm create vite

2.2 选择模板

1.  开发方法库：选择第一个Vanilla模板就可以了
1.  开发组件库：如果想开发基于vue的组件库可直接选择Vue模板

三、封装方法或组件并添加打包配置

新建项目后先npm install安装一下依赖，并将项目中多余的文件和代码删除，减小npm包的大小。

3.1 封装方法库

1. 在根目录下新建src文件夹，并新建一个js文件写入想要封装的方法，如下：
   

2. 在main.js中引入引入封装方法的js文件，并导出封装的方法

3. 配置package.json

{
  "name": "hjw-methods-package", // 包名，命名前可以先去npm官网中查看是否已有这个包名，如果已经有的话就发布不了
  "private": false, // 是否为私有包，false则表示公开包
  "version": "0.0.1", // 版本号，之后如果要更新，必须加大才能发布
  "type": "module",  // 指定项目的模块类型为模块
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
   // 指定发布的文件夹
  "files": [
    "dist"
  ],
  "main": "dist/hjw-methods-packaget.cjs", // 指定项目的主入口文件（CommonJS）
  "module": "dist/hjw-methods-package.js", // 指定项目的模块入口文件（ES Module）
  "devDependencies": {
    "vite": "^5.4.1"
  }
}

4. 创建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.2 封装组件库

1. 在src文件夹新建package文件夹，并创建.vue文件写入想要封装的代码，如下

2. 在package新建js文件，引入封装的组件：

import BtnTab from './BtnTab.vue' // 导入自定义的Vue组件：BtnTab
import './index.css' // 导入CSS样式文件，为应用添加全局样式

// 定义一个安装函数，用于将BtnTab组件注册到Vue应用中
const install = (app) => {
   // 将BtnTab组件注册为全局组件，使得在应用的任何地方都可以使用这个组件
  app.component('BtnTab', BtnTab)
}

// 默认导出一个对象，包含install方法，允许外部通过'default'关键字导入并安装BtnTab组件
export default {
  install,
}
// 单独导出BtnTab组件，允许外部按需导入
export { BtnTab }

3. 配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    lib: {
      entry: 'src/package/index.js', // 入口文件路径
      name: 'hjw-components-package', // 组件库的名称
      fileName: 'hjw-components-package', // 打包后的文件名
    },
    rollupOptions: {
      // 处理不想打包的依赖
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

4. 运行npm run build命令打包

5. 配置package.json

   {
     "name": "hjw-components-package",
     "private": false,
     "version": "0.0.1",
     "type": "module",
     "scripts": {
       "dev": "vite",
       "build": "vite build",
       "preview": "vite preview"
     },
     // 指定包含的文件或文件夹
     "files": [
       "dist"
     ],
     "main": "dist/hjw-components-package.umd.cjs",
     "module": "dist/hjw-components-package.js",
     "exports": {
       ".": {
         "import": "./dist/hjw-components-package.js",  // import导入模块时的入口文件
         "require": "./dist/hjw-components-package.umd.cjs" // require方式引入模块时的入口文件
       }
     },
     "dependencies": {
       "vue": "^3.4.37"
     },
     "devDependencies": {
       "@vitejs/plugin-vue": "^5.1.2",
       "vite": "^5.4.1"
     }
   }
   
   

   6. 编写README.md文件。

      **README.md 文件，是包的使用说明文档，用于向用户和开发者提供项目的相关信息和指导。**README文件中具体写什么内容，并没有强制性要求；只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。如：

   

四、发布到npm

4.1 登录npm

在终端输入npm login ,在登录前一定要将npm源设置为官方源，否则登录会报错

// 官方镜像源
npm config set registry https://registry.npmjs.org/
// 淘宝镜像源
npm config set registry https://registry.npmmirror.com/

检查当前npm源：

npm config get registry

4.2 发布包

在终端输入npm publish （这个命令也需要npm源为官方源）

发布成功后登录npm官网，在自己的账号上packages中就能看到自己发布的包了