码路教育

03-包管理工具

7/25/2022

# 1. npm包管理工具

包管理工具npm

  • Node Package Manager，也就是Node包管理器，也是一个应用程序
  • Node.js 的包基本遵循 CommonJS 规范，将一组相关的模块组合在一起，形成一个完整的工具
  • npm属于node的一个管理工具，安装Node时，已帮我们安装好了
  • 通过 NPM 可以对 Node 的工具包进行搜索、下载、安装、删除、上传。借助别人写好的包，可以让我们的开发更加方便
  • where npm 该命令可以查看 npm 安装的位置
  • 一般在搜索工具包的时候，会到 https://npmjs.org 搜索
  • 安装一个包时其实是从registry（NPM仓库）上面下载的包
  • 发布自己的包其实是发布到registry（NPM仓库）上面的

# 2. package配置文件

一个项目，有非常多的包，我们需要通过一个配置文件（package.json）来管理这些包

  • 每一个项目都会有一个对应的配置文件，无论是前端项目（Vue、React）还是后端项目（Node）
  • 配置文件会记录着你项目的名称、版本号、项目描述，项目所依赖的其他库的信息和依赖库的版本号

生成配置文件

  • 方式一：npm init –y
  • 方式二：通过脚手架创建项目，脚手架会帮助我们生成package.json
{
  "name": "1-npm",      #包的名字(注意生成的包名不能使用中文，大写 ！！！ 不能使用 npm 作为包的名字)
  "version": "1.0.0",   #包的版本
  "description": "",    #包的描述
  "main": "index.js",   #包的入口文件
  "scripts": {			#脚本配置
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",			#作者
  "license": "ISC"		#版权声明
}
1
2
3
4
5
6
7
8
9
10
11

package.json常见的属性

  • name是项目的名称，必填
  • version是当前项目的版本号，必填
  • description是描述信息，很多时候是作为项目的基本描述
  • author是作者相关信息（发布时用到）
  • license是开源协议（发布时用到）
    • http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html(关于开源证书扩展阅读)
  • private属性记录当前的项目是否是私有的，当值为true时，npm是不能发布它的，这是防止私有项目或模块发布出去的方式
  • main属性，设置程序的入口，实际上是找到对应的main属性查找文件的
  • scripts属性用于配置一些脚本命令，以键值对的形式存在，配置后我们可以通过 npm run 命令的key来执行这个命令
    • npm start和npm run start 它们是等价的，对于常用的 start、 test、stop、restart可以省略掉run直接通过 npm start等方式运行；
  • dependencies属性
    • dependencies属性是指定无论开发环境还是生成环境都需要依赖的包
    • 项目实际开发用到的一些库模块vue、vuex、vue-router、react、react-dom、axios等
  • devDependencies属性
    • 在生成环境是不需要的，比如webpack、babel等
    • 通过 npm install webpack --save-dev，将它安装到devDependencies属性中

依赖的版本管理（版本规范是X.Y.Z）

  • X主版本号（major）：当你做了不兼容的 API 修改（可能不兼容之前的版本）
  • Y次版本号（minor）：当你做了向下兼容的功能性新增（新功能增加，但是兼容之前的版本）
  • Z修订号（patch）：当你做了向下兼容的问题修正（没有新功能，修复了之前版本的bug）
  • x.y.z：表示一个明确的版本号
  • ^x.y.z：表示x是保持不变的，y和z永远安装最新的版本
  • ~x.y.z：表示x和y保持不变的，z永远安装最新的版本
  • package-lock.json 是包版本的锁文件，专门来固定包的版本的，不要手动修改

npm install（安装npm包分两种情况）

  • 搜索包: npm search jquery (npm s jquery)
  • 全局安装（global install）： npm install webpack -g
    • 全局安装是直接将某个包安装到全局
    • 全局安装命令在任意的命令行下, 都可以执行
    • 全局命令的安装位置 C:\Users\你的用户名\AppData\Roaming\npm\node_modules
    • 通常使用npm全局安装的包都是一些工具包：yarn、webpack等
    • 全局安装axios之后并不能让我们在所有的项目中使用 axios等
  • 局部安装（local install）： npm install webpack
    • 项目安装会在当前目录下生成一个 node_modules 文件夹
    • 局部安装分为开发时依赖和生产时依赖
      • npm install(i) axios 默认安装开发和生产依赖
      • npm install(i) axios --save（-S） 开发依赖
      • npm install(i) webpack --save-dev（-D） 开发依赖
      • npm install(i) 安装package.json中的依赖包
      • npm install(i) --production // 只安装 dependencies 中的依赖
      • npm remove jquery 移除包

换源

  • 某些情况下我们没办法很好的从 https://registry.npmjs.org下载下来一些需要的包
  • 查看npm镜像 npm config get registry
  • 设置npm镜像 npm config set registry https://registry.npm.taobao.org

npm其他命令之卸载某个依赖包

  • npm uninstall package
  • npm uninstall package --save-dev
  • npm uninstall package -D

npm其他命令之清除缓存

  • npm cache clean

npm更多命令

  • https://docs.npmjs.com/cli-documentation/cli
  • 更多的命令，可以根据需要查阅官方文档

# 3. yarn、cnpm、npx

yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具

  • yarn 是为了弥补 早期npm 的一些缺陷而出现的
  • 早期的npm存在很多的缺陷，比如安装依赖速度很慢、版本依赖混乱等等一系列的问题
  • 从npm5版本开始，进行了很多的升级和改进，但是依然很多人喜欢使用yarn
  • yarn 安装 npm install yarn -g
  • yarn 修改仓库地址 yarn config set registry https://registry.npm.taobao.org
yarn 的相关命令
1)  yarn --version  检测是否安装成功
2)  yarn init   初始化，生成package.json   
3)  yarn global add  package    全局安装
4)  yarn global remove less   全局删除 
5)  yarn add package   局部安装  
6)  yarn add package --dev   (相当于npm中的-D)
7)  yarn remove package  删除局部包文件
8)  yarn list      列出已经安装的包名 用的很少
9)  yarn info packageName   获取包的有关信息  几乎不用
10)  yarn  安装package.json中的所有依赖
1
2
3
4
5
6
7
8
9
10
11

不想修改npm原本从官方下载包的渠道，可以使用cnpm，并且将cnpm设置为淘宝的镜像

  • npm install -g cnpm --registry=https://registry.npm.taobao.org
  • cnpm config get registry

npx工具

  • npx是npm5.2之后自带的一个命令，使用它来调用项目中的某个模块的指令
  • npx的原理非常简单，它会到当前目录的node_modules/.bin目录下查找对应的命令

局部命令的执行

  • 方式一：在终端中使用如下命令（在项目根目录下） ./node_modules/.bin/webpack --version
  • 方式二：修改package.json中的scripts "webpack": "webpack --version"
  • 方式三：使用npx npx webpack --version

# 4. 发布自己的开发包

流程

  1. 修改为官方的地址 ( npm config set registry https://registry.npmjs.org/ )
  2. 创建文件夹，并创建文件 index.js， 在文件中声明函数，使用 module.exports 暴露
  3. npm 初始化工具包，package.json 填写包的信息 （越复杂越容易提上去）
  4. 账号npm注册（激活账号）,==完成邮箱验证==
  5. 命令行下 『npm login』 填写相关用户信息 (一定要在包的文件夹下运行)
  6. 命令行下『 npm publish』 提交包 👌
  7. npm 有垃圾检测机制，如果名字简单或做测试提交，很可能会被拒绝提交，可以尝试改一下包的名称来解决这个问题
Last Updated: 12/25/2022, 10:02:14 PM

04-网络理论