npm的应用

嚣张丶小麦兜

393人浏览 · 2026-01-07 23:10:58

嚣张丶小麦兜 · 2026-01-07 23:10:58 发布

npm基本使用

基本定义：npm 是随 Node.js 一起安装的 JavaScript 包管理工具，主要用于下载、管理和发布第三方模块
如何安装：安装 Node.js 时，npm 会自动被安装。安装后，在终端运行 npm -v 可以验证安装并查看版本

npm基本命令

项目初始化：npm init
初始化项目，生成 package.json 文件

安装包：npm install <包名> 或 npm i <包名>
安装包到当前项目的 node_modules 目录
-g：全局安装
–save 或 -S：安装并写入 package.json 的 dependencies（生产依赖）
–save-dev 或 -D：安装并写入 devDependencies（开发依赖）
@版本号：安装指定版本

卸载包：npm uninstall <包名>
可使用 -S, -D, -g 等选项同步更新 package.json

更新包：npm update <包名>
npm update + 包名更新指定包
npm update 更新所有包

运行脚本：npm run <脚本名>
运行 package.json 中 scripts 字段定义的脚本
start、test 等是内置命令，可直接运行

查看信息：npm list 或 npm ls
列出已安装的包
-g 查看全局包

配置镜像：npm config set registry <镜像地址>
设置下载源（如淘宝镜像：https://registry.npmmirror.com）
get registry 可查看当前源

包配置

配置文件

npm将每个使用npm的工程本身都看作是一个包，包的信息需要通过一个名称固定的配置文件来固定，名称为 package.json。可以手动创建，更多时候是通过npm init来生成，使用npm init -y 或 npm init --yes可在生成配置时自动填充默认配置信息
配置文件信息：

name：包名称，必须是英文字符，支持连接符

version：包版本
版本规范：主版本号，次版本号，补丁版本号
^1.2.3：允许更新次版本和修订号（如 1.2.4, 1.3.0）。
~1.2.3：只允许更新补丁版本号（如 1.2.4）。
无符号 1.2.3：锁定当前精确版本

description：包描述

homepage：官网地址

author：包作者，必须是有效的npm账户名，不正确的账号和邮箱可能导致发布包时失败

respository：包仓库地址，通常指git或svn地址，他是一个对象（type：仓库类型，git或svn；url：地址）

main：包的入口，使用包的人默认从该入口文件导入包的内容

keywords：搜索关键字，发包后通过该数组中的关键字搜索到包

dependencies：生产环境依赖

devDependencies：开发依赖

包查找

默认从node_modules里面找包，找到后如果包内有package.json，则先看main配置入口，如无main配置，则默认找index.js文件

补充知识

理解 package-lock.json：这个文件会锁定所有依赖包的确切版本，确保团队成员或生产环境安装的依赖完全一致。建议将其提交到版本控制系统
探索 npx：npx 是 npm 自带的工具，用于临时执行某个包的命令，而无需全局安装（例如：npx create-react-app my-app）

发布包

1、npm login 先登录验证
2、npm whoami 登录后验证登录信息
3、建好 package.json 必要的信息
4、npm publish 发布
5、如果需要更新，则需要修改一下版本号即可

vue3组件库封装与使用

1、封装组件（button.vue）

<template>
  <div :class="[type]"><slot /></div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'my-button',   // 必须要给名字 方便挂载的时候遍历获取名称
})
withDefaults(
  defineProps<{
    type?: string
  }>(),
  {
    type: 'p',
  },
)
</script>

<style lang="scss" scoped>
.d {
  color: red;
}
.p {
  color: blue;
}
</style>

2、项目内部全局注册使用（main.ts）

import { createApp } from 'vue'
import App from './App.vue'
import Button from './components/Button/button.vue'
import "@/styles/my-component.scss";  // 如果公共样式依赖 则在这里引入

const componentArr = [Button] // 如果有其它组件，都放到这里

const app = createApp(App)

componentArr.forEach(component => {
  app.component(component.name, Button)  // 对应组件里面的名称 my-button
})

app.mount('#app')

3、组件打包出口（src / bundle.ts）

import Button from './components/Button/button.vue'
import "@/styles/my-component.scss";  // 如果公共样式依赖 则在这里引入

const componentArr = [Button]  // 如果有其它组件，都放到这里

const install = (app) => {
  componentArr.forEach(component => {
    app.component(component.name, Button)
  })
}

export default {
  install
}

4、创建打包配置（src / vite.es.config.ts）

// 打包 ES 模块所用的配置文件
import { fileURLToPath, URL } from 'node:url'
import { resolve, dirname } from 'node:path'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

const __dirname = dirname(fileURLToPath(import.meta.url))

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  build: {
    outDir: 'dist/es',
    lib: {
      // 打包入口文件
      entry: resolve(__dirname, 'src/bundle.ts'),
      name: 'vue3-sqb-components',  // 库名
      fileName: 'vue3-sqb-components',// 打包后的产物名
      formats: ['es'] // 打包格式es
    },
    // vite内部使用rollup打包
    rollupOptions: {
      // 不需要打包进组件库的依赖
      external: ['vue', 'unocss']
    }
  }
})

5、调整package.json

{
  "name": "vue3-sqb-components",   // 添加打包配置
  "version": "0.0.0",
  "description": "自己学习组件库",
  "private": true,
  "type": "module",    // 添加打包配置
  "license": "MIT",		// 添加打包配置 
  "engines": {
    "node": "^20.19.0 || >=22.12.0"
  },
  "keywords": [			// 添加打包配置
    "vue3",
    "components"
  ],
  "files": [		// 添加打包配置
    "dist"
  ],
  "module": "dist/em/vue3-sqb-components.js",    // 添加打包配置
  "exports": {     // 添加打包配置
    "import": "./dist/em/vue3-sqb-components.js"
  },
  "scripts": {
    "dev": "vite",
    "build": "pnpm build-es",  // 添加打包配置
    "build-es": "vite build --config vite.es.config.ts",   // 添加打包配置
    "preview": "vite preview",
    "test:unit": "vitest",
    "build-only": "vite build",
    "type-check": "vue-tsc --build",
    "lint": "eslint . --fix --cache",
    "format": "prettier --write --experimental-cli src/"
  },
  "dependencies": {},
  "devDependencies": {
    "vue": "^3.5.26",		// 开发依赖 调整到此处
    "unocss": "66.5.6",  // 开发依赖 调整到此处
    "vue-router": "^4.6.4",		// 开发依赖 调整到此处
    "@tsconfig/node24": "^24.0.3",
    "@types/jsdom": "^27.0.0",
    "@types/node": "^24.10.4",
    "@vitejs/plugin-vue": "^6.0.3",
    "@vitejs/plugin-vue-jsx": "^5.1.3",
    "@vitest/eslint-plugin": "^1.6.5",
    "@vue/eslint-config-prettier": "^10.2.0",
    "@vue/eslint-config-typescript": "^14.6.0",
    "@vue/test-utils": "^2.4.6",
    "@vue/tsconfig": "^0.8.1",
    "eslint": "^9.39.2",
    "eslint-plugin-vue": "~10.6.2",
    "jiti": "^2.6.1",
    "jsdom": "^27.4.0",
    "npm-run-all2": "^8.0.4",
    "prettier": "3.7.4",
    "typescript": "~5.9.3",
    "vite": "^7.3.0",
    "vite-plugin-vue-devtools": "^8.0.5",
    "vitest": "^4.0.16",
    "vue-tsc": "^3.2.2"
  },
  "peerDependencies": {   // 添加对等依赖
    "vue": "^3.5.26"
  }
}

6、开始打包
执行 pnpm build 命令

7、发布到npm
a、npm login 先登录验证
b、npm whoami 登录后验证登录信息
c、npm publish 发布

8、项目使用

// 先安装 npm install vue3-sqb-components

// 项目main.ts 引入
import { createApp } from "vue";
import App from "./App.vue";

import vue3_sqb_components from 'vue3-sqb-components'
import 'vue3-sqb-components/style.css'

const app = createApp(App);

// 注册插件
app.use(vue3_sqb_components)
app.mount("#app");