前端开发必备的npm知识npm 是Javascript的包托管平台，成千上万的Javascript开发者上传了自己的js

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第10天，点击查看活动详情

npm 是Javascript的包托管平台，成千上万的Javascript开发者上传了自己的js插件，提供给其他人使用，这为所有js开发者提供了极大的便利，所以掌握npm相关的知识，已是成熟的前端开发者必备的技巧了。

npm官网

一、注册一个npm账户

注册地址：www.npmjs.com/signup

浏览npm网站、使用npm指令或使用npm上的包都不需要登录，除非你希望上传和管理自己的插件，但作为前端开发，尽管可能还用不上，我都建议你先注册一个账户，并尝试自己封装一些工具插件等，这会是很有意思的事情。

如果你已经注册了，可以在这里登录：www.npmjs.com/login

二、package.json

package.json 是你的项目描述文件，里面会记录你通过npm安装的依赖包，同时，如果你当前开发的项目是一个准备发布在npm上的包，那package.js也是必不可少的。

package.json文件应该位于你项目的根目录，通过npm指令可以快速初始化package.json

npm init
// or
npm init -y

-y 表示使用默认配置，不使用 -y 时，命令行会进入对话，填入自己想要填写的信息即可生成

注意：npm指令依赖于node环境，如果使用npm指令不能成功，请先检查Node是否已安装

我们打开package看看里面都包含了什么东西：

{
  "name": "项目名字",
  "version": "0.1.0", // 版本号
  "private": false, // 是否为私有包，如果为true，不能发布到npm上
  "description": "包的描述",
  "homepage": "包的官网地址",
  "author": { // 作者信息
    "name": "名字",
    "email": "邮箱",
    "url": ""
  },
  "contributors": [ // 其他协助开发者信息
    {
      "name": "",
      "email": ""
    },
  ],
  "repository": { // 包存放的类型和地址
    "type": "git", // git或svm
    "url": "git+https://github.com/strongloop/express.git"
  },
  "main": "index.js", // 项目入口，若作为包使用，别人默认导入的是这里声明的文件
  "keywords": [], // 包的关键字
  "scripts": { // 项目脚本配置，可通过npm run name 运行node脚本
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "bugs": "bug的追踪地址，常见如GitHub 的 issues 页面",
  "license": "MIT", // 指定包的许可证
  "dependencies": { // 运行依赖
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": { // 开发依赖
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  },
  "engines": { // 包的运行环境
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  },
   "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"], // 浏览器支持
}

我列出了单独的字段映射，方便查看

字段	用途
name	项目名称
version	版本号
private	是否为私有包，如果为true，不能发布到npm上
description	包的描述
homepage	包的官网地址
author	作者信息
contributors	其他协助开发者信息
repository	包存放的类型和地址
main	项目入口，若作为包使用，别人默认导入的是这里声明的文件
keywords	包的关键字
scripts	项目脚本配置，可通过npm run name 运行node脚本
bugs	bug的追踪地址，常见如GitHub 的 issues 页面
license	指定包的许可证
dependencies	运行依赖
devDependencies	开发依赖
engines	包的运行环境
browserslist	浏览器支持

三、装包与使用

安装

安装的包存放在 node_modules 文件夹中

安装命令： npm install packageName 安装指定包名（packageName）的包

命令简写： npm i packageName

安装指定版本： npm i packageName@beta beta版本号，默认最新版本@latest

指定为运行依赖类型：npm i packageName -S 默认是运行时依赖，可以不加 -S

指定为开发依赖类型：npm i packageName -D 在webpack前端项目中，-D为开发时候用的依赖，比如测试工具等不需要打包到前端文件的依赖

卸载

卸载命令： npm uninstall packageName

执行卸载命令会将依赖从package.json文件中移除，且删除node_modules中的文件

更新

查看项目中过时的包：npm outdated

更新项目中全部包：npm update

更新特定的包： npm update packageName

在更新包之前，应确定不会对旧代码产生影响，比如一些旧特性的删除，项目中是否使用到

使用

在导入包时，不需要指定路径，直接导入名字即可，node会到node_modules中寻找对应的包

// node.js
var lodash = require('lodash');

ES6语法也是一样的道理

// js
import Vue from 'vue';

四、发布自己的包

在发布之前，需要通过指令登录自己的npm账户:

npm login

输入login指令后，会让你填写账号密码以及邮箱，登录成功后才可以执行发布命令

发布命令： npm publish

该命令会把当前package.json的信息，以及你的项目上传到npm公共包，所有人都能看到并使用你的包

为了避免包名冲突而导致上传失败，你应该提前在npm上搜索你的包名，确保唯一性

上传完成后需要等待几分钟，再到npm上搜索，应该能搜索到刚刚上传的包。