优化实战第 30 期 - 高效利器之跨技术栈工具库在不同项目的开发过程中，会用到许多通用的工具方法，然而每次都要来回的

在不同项目的开发过程中，会用到许多通用的工具方法，然而每次都要来回的拷贝，不仅浪费时间，还不利于维护。

NPM 介绍

安装及验证
```
npm -v
```
随着 NodeJS 的安装就已经存在，可通过以上命令查看其版本号
使用场景

1、从 npm 服务器拉取第三方包或命令行程序到本地使用

2、将自己编写的包或命令行程序上传到 npm 服务器供别人使用

NPM 常用指令

初始化配置文件
```
npm init -y
```
在当前目录下生成一个严格的 JSON 文件，用来记录包的相关信息

安装依赖包

npm i axios --save  或  npm i -S axios
npm i nodemon --save-dev 或 npm i -D nodemon

前者用于安装项目运行所依赖的模块，后者用于安装项目开发所依赖的模块

移除依赖包
```
npm uninstall [package]
```
升级依赖包
```
npm update [package]
```
查看当前项目中已安装的包
```
npm list
```

查看 node_modules 的位置

npm root    查看当前项目的安装位置
npm root -g    查看全局的安装位置

查看可以升级的依赖包
```
npm outdated
```
通过 npm update 升级所有红色表示的符合语义化版本规范的依赖包
升级 NPM 为最新版本
```
npm i npm@latest -g
```

NPM 配置信息

查看相关配置
```
npm config ls -l
```
提取部分配置

默认的 npm 下载路径
```
prefix = "C:\\Users\\DELL\\AppData\\Roaming\\npm"
```
默认的 npm 缓存路径
```
cache = "C:\\Users\\DELL\\AppData\\Roaming\\npm-cache"
```
注意：其中 AppData 是隐藏文件夹，在【查看】菜单中勾选【隐藏的项目】才可以看到

NPM 包的源地址

查看源地址

npm config ls

默认使用 npm 的官方镜像仓库

registry = "https://registry.npmjs.org/"

更改源地址
```
npm config set registry https://registry.npm.taobao.org
```
作用： 使用淘宝镜像仓库，提升包的下载速度

NPM 包的路径更改

下载路径

npm config set prefix "D:\npm\download"

缓存路径
```
npm config set cache "D:\npm\cache"
```
作用： 缓解 C 盘压力，避免电脑卡顿

Package.json 文件的配置

必须的配置项

{
  "name": "项目名称",
  "version": "大版本.次版本.小版本",
  "main": "index.js"  // 指定模块加载的入口文件
}

描述相关配置

{
  "description": "模块的描述信息，便于使用者查找和了解模块的功能",
  "keywords": ["ES10", "nodejs", "关键字"]
}

类似于项目的 SEO 优化，有利于模块获得更精准的匹配和曝光

开发人员相关配置

{
  // 一个 author 对应一个人
  "author": {
    "name": "模块的主要作者",
    "email": "main_author@163.com",
    "url": "https://github.com/username"
  },
  // 模块的贡献者信息
  "contributors": [
    { "name": "张三", "email": "zhangSan@163.com", "url": "" },
    { "name": "李四", "email": "liSi@163.com", "url": "" }
  ]
}

人员的信息描述除以上结构外还可以是一个字符串

地址相关配置

{
  // 模块的展示主页
  "homepage": "https://www.project.com",
  // 指定一个地址或者一个邮箱，便于使用者反馈问题
  "bugs": {
    "url": "https://github.com/project/issues",
    "email": ""
  },
  // 模块的代码仓库地址
  "registry": {
    "type": "git",
    "url": "https://github.com/project"
  }
}

脚本命令配置
```
{
  "scripts": {
    "start": "node ./bin/www",
    "test": ""
  }
}
```
以上命令通过 npm 直接执行，其它自定义命令需要使用 npm run 来执行

依赖相关配置

{
  // 项目运行所依赖的模块
  "dependencies": {
    "axios": "^0.19.2"
  },
  // 项目开发所依赖的模块
  "devDependencies": {
    "nodemon": "^2.0.2"
  }
}

指定项目运行的 node 版本范围
```
{
  "engines": ">= 14.0.0"
}
```

发布模块的相关配置

{
  "publishConfig": {
    "registry": "如果发布到公司内部搭建的私有 npm 仓库，则需要配置地址"
  },
  // 允许推送到 npm 服务器的文件列表，也可指定文件夹
  "files": [ "index.js", "package.json", "README.md" ]
}

防止垃圾文件被推送到 npm 服务器

静态配置

{
  "name": "app",
  "config": { 
    "port": "8080" 
   }
}
// Node环境读取属性 process.env.npm_package_config_port

用来配置一些不怎么发生变化的属性，比如端口号

代码打包配置

配置 webpack.config.js 文件

const path = require('path')
module.exports = {
  mode: 'production',
  // 指定入口文件
  entry: './src/index.js',
  // 指定出口文件的相关配置项
  output: {
    // 打包文件夹
    path: path.resolve(__dirname, 'dist'),
    // 打包生成的文件名称
    filename: 'm-toolset.js',
    // 设置对外暴露对象的全局名称
    library: 'mt',
    // 打包生成通过 esm、commonjs、requirejs 的语法引入
    libraryTarget: 'umd',
  }
}

入口文件
```
export { intersection, union } from './array'
```
将编写的所有工具函数通过入口文件暴露给外部
配置 package.json 文件
```
{
  "scripts": {
    "build:watch": "webpack --watch"
  }
}
```
通过 npm run build:watch 运行打包命令，生成打包文件

创建并发布一个包

注册 NPM 账户

www.npmjs.com
规范包的基本构成

包的基本信息 package.json

入口文件 index.js

包的说明文档 README.md
发布操作

检验包名是否已存在 npm search [package]

通过 npm login 登录账户

使用 npm publish [package] 进行发布
注意事项

发布的仓库必须是 NPM 的官方仓库或公司内部的私有库

在文件 package.json 中一定要指定对应的入口文件

优化实战 第 30 期 - 高效利器之跨技术栈工具库