持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情

前言

npm包，前端开发的同学应该很熟悉，在我们日常的开发中经常会npm install，npm unintsall， npm update等等，都很熟悉这些操作命令大家都很熟悉，但是对于刚刚进入到前端的同学就不是很清楚这个到底干了什么，为什么一定要这样的操作

本文将详细的描述一下npm的一些知识点

npm概念

npm 全称为： Node Package Manager，也就是node.js的包管理工具。

在我们前端的工程越来越复杂的时候，我们的工程外部，内部的javascript的代码越来越复杂，就必然存在相互引用的现象，这时候我们常做的一个办法就是将某些特定场景的功能块，具有可抽象的组件，模块，进行封装，最终形成一个js包，提供到其他的地方进行引用，不需要重复的去造轮子了，而这时候还会诞生很多其他的问题，比如js包的代码升级维护，如果我们采用手动复制的方式去引用，那会非常的困难，再有对于js包的版本的控制也无法去进行控制，比如某一个工程依赖某个包1.0的功能，而这个包2.0的包可能当前工程并没有去做兼容，此时我们的工程就很难去进行特定版本的包的使用，因此才会出现这样一个包的管理工具帮助我们进行代码模块包的管理。

一个简单的npm包版本的示意：

"wg-router-tab": "^0.1.1"

版本号的解释：

1、常规版本示意：

major.minor.patch ： [-当前版本属于]
major： 颠覆性的改变版本(类似angular1-->angular2的改变)
minor： 功能性的迭代版本
patch： 简单修复bug的版本

2、我们在有的npm包后会看到有四位

一般来说我们这么来用： Alpha： 内测版本 Beta： 公测版 RC：发布正式版本前的预览版本

3、关于锁包几种方式

^：开头的表示第一个版本不能改变
~：开头的表示第二个版本不能改变
>=： 表示大于什么版本

npm源

目前国内有很多的镜像源，我们通过npm intsall 会自行找到当前配置的源去进行npm包的查找及下载安装，这里简单说明一下npm源的管理

在我们npm安装好以后默认的源是：registry.npmjs.org/ 因为这个源是在国外，我们在国内用这个源去下载包会非常的慢，我们常常会把源切换到tabao的镜像源来进行加速如下所示：

npm config set registry https://registry.npm.taobao.org

我们可以设置很多源，但是只会有一个源是生效的

对于我们源很多的情况下，我们可以采用npm的nrm模块去进行管理

// 安装nrm
npm install -g nrm

// 使用nrm新增源
nrm add  <registry名称> <registry-url> [home]

// 使用nrm删除已配置的源
nrm del <registry名称>

// 查看当前全部的源
nrm ls

// 使用nrm进行源的响应测试
nrm test <registry名称>  || nrm test

nrm ls 运行如下：

nrm test 运行如下：

如果公司内部是有npm私有仓库的话，大家可以切换到公司的私有仓库进行npm包的相关开展

配置公司npm私有仓库（默认npm-group 仓库已经代理了npm官方仓库和taobao的仓库）：

nrm add wgGroup http://xxx:8081/repository/npm-group

配置完毕以后继续完成登录操作

// 登录当前源，使用账号登录即可
npm login --registry=http://xxx:8081/repository/npm-group

npm包的开发

1、初始化一个npm包

// 初始化npm包
npm init

2、修改初始化的package.json

这里要注意几个事情

publishConfig配置，需要配置为公司内部的源地址
在本地开发时候不能使用dist/indx.js，这样将把你在本地引用当前包的代码指向dist，就无法即时调试
每一次发版本务必修改version到对应的版本


{
  "name": "wg-cli",                         //  包名称
  "version": "0.1.4",                       // 版本号
  "description": "wg前端脚手架",              // 对当前npm包的相关描述
  "main": "index.js",						// 当前包的主文件
  "author": "mothpro",					// 作者
  "license": "ISC",
  "keywords": [                             // 这个可以不设置，做为当前包的关键词
    "wg-cli"
  ],
  "publishConfig": {                        // 这个务必设置，设置为公司内的镜像源仓库地址
    "registry": "http://xxx:8081/repository/npm-repo"
  },
  "bin": {                                  // 配置启动文件目录
    "wg-cli": "/dist/index.js"
  },
  "scripts": {                              // 在这里配置当前工程启动命令，发布命令
    "build": "cross-env NODE_ENV=production babel src -d dist --ignore "src/**/*.test.js"",
    "publish":"npm run build && npm publish",// 打包并进行发布
    "clean": "del-cli dist"
  },
  "dependencies": {                         // 生产依赖包
    "chalk": "3.0.0",
    "commander": "2.20.3",
    "download-git-repo": "3.0.2",
    "inquirer": "7.3.3",
    "ora": "4.1.1",
    "request": "2.88.2",
    "semver": "7.3.2"
  },
  "devDependencies": {                      // 开发依赖包
    "@babel/cli": "7.14.5",
    "@babel/core": "7.14.5",
    "@babel/plugin-syntax-dynamic-import": "7.8.3",
    "@babel/preset-env": "7.14.5",
    "babel-plugin-add-module-exports": "1.0.4",
    "babel-plugin-component": "1.1.1",
    "babel-preset-minify": "0.5.1",
    "cross-env": "6.0.3",
    "del": "5.1.0",
    "del-cli": "2.0.0"
  },
  "engines": {                             // node版本限制
    "node": ">=14.16.1"
  },
  "files": [
    "dist",
    "LICENSE",
    "package.json"
  ]
}

3、开始开发

下面根据我们在packag.json中配置的主入口文件，在根目录下去新建目录，我们的代码最终都以index.js为出口，不管我们的包内依赖多少的包，提供什么能力最后输出的出口也在此处

这里不展开具体包内部的工程化结构，这个可以千变万化，没有一个绝对意义上的好坏，有效的组织自己代码是需要根据具体实现的能力来决定

4、本地调试

我们在当前开发的npm包内馅要将这个包注册到全局的npm，node_modules中去，可以直接在当前工程中执行：

npm link

在macOS下需要添加sudo，并输入密码才能获得权限添加

如果是开发组件包，或者需要在某些工程中引用的包，这时候我们只需要在对应的工程下执行

npm link <包名称>

至此，就可以在实际场景中对包进行相应的开发，在包内进行的修改都可以即时更新

5、开发完毕进行发布

我们必须要先看看当前是否把源切换到了公司的内部镜像仓库地址
在确保我们的源是在公司内部源后，同时必要进行登录
确保包的版本号已经进行修改，具体版本号的修改根据上方npm包版本解释里的规则来进行修改

此时我们包根目录下执行

npm publish

至此我们的一个包就完成开发及发布的整个流程了，发布完毕以后，我们在对应的工程中进行npm install -S <包名称>@版本号，即可以开始使用了

前端NPM包开发及应用

前言