旧梦星轨

旧梦星轨

关注
发信
关注(28)粉丝(399)

前端工程化之包管理器

前端工程化之包管理器-LMLPHP

前端工程化之包管理器-LMLPHP

什么是包

包管理工具

常用的包管理工具

npm

前端工程化之包管理器-LMLPHP

npm 基本使用

初始化
  • 创建一个空目录，然后以此目录作为工作目录 启动命令行工具 ，执行 npm init
  • npm init 命令的作用是将文件夹初始化为一个『包』， 交互式创建 package.json 文件
  • package.json 是包的配置文件，每个包都必须要有 package.json
  • package.json 内容示例：
{
"name": "1-npm", #包的名字
"version": "1.0.0", #包的版本
"description": "", #包的描述
"main": "index.js", #包的入口文件
"scripts": { #脚本配置
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "", #作者
"license": "ISC" #开源证书
}

前端工程化之包管理器-LMLPHP

搜索工具包
  1. 命令行 『npm s / search 包名』
  2. 网站搜索 网址是 https://www.npmjs.com/ （推荐）
下载安装包

如：

npm install uniq --save   或   npm i uniq -S

运行之后文件夹下会增加两个资源

  • node_modules 文件夹 存放下载的包

  • package-lock.json 包的锁文件 ，用来锁定包的版本

  • 关于package-lock.json 中的版本限制的说明：

    • ^：锁定主版本号，接受所有以1开头的版本，如：1.0.2等，但不包括2.0.0。
    • ~：允许安装小版本的更新，但不包括次要版本的更改。~1.0.1 允许 1.0.x。
    • >：允许比指定版本更高的版本，但不包括指定版本本身。>1.0.1 允许 1.0.2, 1.1.0, 2.0.0等。
    • <：允许比指定版本更低的版本。<1.0.1 允许 1.0.0 及更早的版本。
    • >=：允许指定版本及更高的版本。>=1.0.1 允许 1.0.1 及其之后的版本。
    • <=：允许指定版本及更低的版本。<=1.0.1 允许 1.0.1 及其之前的版本。
    • *：允许任何版本，这种情况下最不限制，但也最不稳定。

  • 如果没有任何符号，只写版本号，如 1.0.1，这意味着严格要求安装这个特定版本。

导入 npm 包基本流程
  1. 在当前文件夹下 node_modules 中寻找同名的文件夹
  2. 在上级目录中下的 node_modules 中寻找同名的文件夹，直至找到磁盘根目录
生产依赖与开发依赖

我们可以在安装时设置选项来区分 依赖的类型 ，目前分为两类：

全局安装

我们可以执行安装选项 -g 进行全局安装

npm install -g 包名
  • 全局安装的命令不受工作目录位置影响
  • 可以通过 npm root -g 可以查看全局安装包的位置
  • 通过 npm list -g 查看全局包的列表
  • 不是所有的包都适合全局安装，通常是命令行工具包，才适合全局安装。
安装全部依赖

在项目协作中有一个常用的命令就是 npm i ，通过该命令可以依据 package.json 和 packagelock.json 的依赖声明安装项目依赖
若只想安装生产依赖，可以使用npm install --prod 或 npm i --omit=dev

npm i
或
npm install
安装指定版本的包

项目中可能会遇到版本不匹配的情况，有时就需要安装指定版本的包，可以使用下面的命令的

## 格式
npm i <包名@版本号>

## 示例
npm i jquery@1.11.2

查看一个包的所有版本

npm view 包名 versions
删除依赖包
## 局部删除
npm remove 包名
npm r 包名
## 全局删除
npm remove -g 包名
npm r -g 包名

以上就是对包管理工具进行了一个初步的介绍，其余的几种包管理工具的核心，概念和使用方法都是大同小异，只要将 npm 掌握了，其它的也就很容易上手了。

cnpm

前端工程化之包管理器-LMLPHP
cnpm 是一个 npm 的替代工具，cnpm 服务器部署在国内，主要用于在国内优化 npm 包的下载速度，cnpm 由淘宝团队创建和维护，又称：淘宝镜像。

全局安装

  • 对于cnpm 的使用有两种方式：
    • 第一种方式：安装 cnpm 包管理器 
 npm install cnpm -g --registry=https://registry.npmmirror.com

该种方式是全局安装了 cnpm 包，并且切换了包的下载源，以后全局用 cnpm 命令即可，cnpm兼容npm命令

  • 第二种方式：仅修改npm服务器地址
npm config set registry https://registry.npmmirror.com

该种方式只是修改了npm服务器地址，以后还是用npm命令
npm 原始远程服务器地址为 https://registry.npmjs.org/

查看下载服务器源地址

npm config get registry

nrm 的使用

  • 安装
npm install nrm -g
  • 列出可用地址
nrm ls
  • 添加新地址
nrm add 别名 URL
  • 切换到指定地址
nrm use 别名
  • 测试各地址速度
nrm test
  • 删除地址
nrm del 别名

yarn

前端工程化之包管理器-LMLPHP
yarn是一个快速、可靠的依赖管理工具，由 Facebook 在 2016 年开发，yarn的优势如下：

  • 速度：yarn使用并行安装机制来加快速度。
  • 缓存：yarn会缓存每个下载过的包，无需重复下载。
  • 界面：yarn提供更详细的输出，包括进度条等等。
  • 安全：yarn会通过算法校验每个安装包的完整性。
  • yarn：官网

备注：以上 yarn 的优势，目前最新的 npm 也都基本具备了。所以这些优势如今并不明显

全局安装

npm i yarn -g

备注：安装 yarn 后，需要在系统全局配置环境变量

yarn 常用命令

pnpm 【推荐使用】

前端工程化之包管理器-LMLPHP

pnpm：官网
点击了解幻影依赖

全局安装

npm install pnpm -g

前端工程化之包管理器-LMLPHP

05-12 07:06
Powered by LMLPHP ©2024 旧梦星轨 0.002070