一、代码共享方案
- npm 进行发布上传 npmregistry
- npm 进行安装
二、npm 包管理工具
2.1 介绍
-
安装 node 的时候自动安装
-
node package manager:Node 包管理工具
-
可以通过 npm 安装说明已经上传到这个仓库里面了
-
npm 官网查看是否有发布:npmjs.org
2.2 npm的配置文件
- package.json
- 记录着项目的名称、版本号、项目描述
- 项目所依赖的其他库的
- npm init:自动生成 package.json
- 手动从零开始创建项目:npm init -y:所有东西都是yes
- 通过脚手架创建项目:vue create shopping:会搭建好这个项目所需要配置的东西,包括 package.json
2.3 常见的属性
-
name:项目的名称
-
version:项目版本
-
description:描述
-
author:作者
-
license:开源协议
-
private:true
- npm不能发布它,防止私有项目或模块发布出去的方式
- main属性:设置程序的入口
-
script:配置脚本命令npm run xxx
-
start、test、stop、restart可以省略run
-
dependencies:开发和生产环境都需要依赖的包:
npm i axios
-
devDependencies:开发依赖,有一些包在生成环境是不需要的,比如webpack、babel、vue-loader
-
这个时候通过npm install webpack --save-dev安装到devDependencies属性中
- 简写:npm install webpack -D
-
peerDependencies:对等依赖,你依赖的一个包,它必须是以另外一个宿主包为前提的
- element-plus:必须安装vue
-
engines:指定 Node 和NPM 的版本号
-
browserslist:浏览器兼容情况
2.4 semver版本规范
- X.Y.Z
- X:主版本号,可能不兼容之前的版本,发生了重大版本更新
- vue3 不兼容 vue2 版本的一些 api
- Y:次版本号,增加了新特性和新功能,但是兼容之前的版本
- Z:修订号,没有新功能,修正了之前的bug
- x.y.z:明确的版本号
- ^x.y.z:x 是保持不变的,y 和 z 永远安装最新的版本,后面两者动态
- ~x.y.z:x 和y 是保持不变的, z 永远安装最新的版本
2.5 npm install 命令
-
本地/局部安装:在哪个文件夹就安装到哪个文件夹里面,不会添加到环境变量里面
- 会在当前目录下生成一个node_modules文件夹
- 又分为
- 开发依赖: -D
- 生产依赖
-
全局安装:npm i webpack -g
- 必须依赖 webpack-cli -g
- 一般安装的都是工具包:yarn、webpack
-
原理
- 从 远程registry 中进行下载
- 若本地两个仓库都有 axios
- 存在缓存的概念,通过算法去找对应的包==》标识符(integrity)
- 在package-lock.json中
- package-lock.json:确定死的版本,一般不修改
- name:项目的名称
- version:项目的版本
- lockfileVersion:lock文件的版本
- requires:使用requires来跟踪模块的依赖关系
- dependencies:项目的依赖
-
卸载某个包:
npm uninstall webpack
npm ininstall axios -D
-
强制重新build:
npm rebuild
-
清除缓存:
npm cache clean
2.6 npm 发布自己的开发包
- 编写自己的工具/库/框架
- 必须包含 package.json
- 除了在github也可以发布在registry
- 步骤
- 注册npm账号 https://www.npmjs.com
- 在vscode里面登录:npm login
- 修改 package.json
- 发布到 npm registry上:npm publish
- 更新仓库
- 修改版本号:最好符合 semver 规范
- 重新发布
- 删除发布的包:npm unpublish
- 让发布的包过期:npm deprecate
三、 yarn 工具
-
早期的 npm 存在安装依赖速度缓慢、版本依赖混乱等问题
-
npm5 之后进行很多升级和改进
-
npm i yarn -g
-
初始化:yarn init
-
安装包:
yarn add axios
-
与npm 区别
四、cnpm工具
- registry 是国外的服务器
- 淘宝的镜像服务器十分钟更新一次,进行备份
- 查看npm镜像:
npm config get registry
- 设置npm的镜像:npm config set registry=https://registry.npm.taobao.org
- 安装一个新的工具:npm install cnpm -g
- 设置cnpm的镜像:cnpm config set registry=https://registry.npm.taobao.org
五、npx工具
-
npx是 npm5.2之后自带的一个命令
-
在安装项目之前,先创建package.json
- 手动创建:npm init -y
- npm i webpack-cli -D(开发依赖,打包)
- 在里面script执行命令,优先在modules的bin里面找
- 全局安装webpack:
npm i webpack@3.6.0 -g
-
使用 npx 直接(优先)在node_modules下面的bin文件中优先查找
- webpack 对源代码进行打包
- 默认情况下运行全局的
-
局部命令的执行
- 必须进入到目录,在终端使用如下命令 ./node_modules/.bin/webpack --version
- 修改scripts脚本:“webpack”: “webpack --version”
- 使用npx:npx webpack --version
六、pnpm 使用和原理
-
performant 高性能的 npm
- 快速/高效/严格/支持 monorepos /严格
- 速度快、节省磁盘空间
-
vue 源码已经开始使用 pnpm 了
-
使用的公司:Microsoft、ByteDance
-
依赖包将被存放在一个统一的位置
- 同一依赖包使用相同的版本,磁盘上只有依赖包这一份文件
- 同一依赖包需要使用不同的版本,仅有版本之间不同的文件会被存储起来
- 所有文件都保存在硬盘上的统一的位置
- 建立硬链接,不会占用额外的硬盘空间
-
pnpm 创建非扁平的 node_modules目录873
-
安装npm install pnpm -g
-
当使用npm或yarn安装依赖包时,所有软件包都将被提升到node_modules的根目录下
a. 源码可以访问本不属于当前项目所设定的依赖包 -
通过硬链接和软连接的方式连接起来
-
整个结构嵌套的层级有点多,不会随便引入非自己安装的依赖pnpm的存储store
-
获取对应目录:pnpm store path
-
从store中删除当前未被引用的包来释放store的空间:pnpm store prune
七、硬链接/软连接
- 硬链接:电脑文件系统中的多个文件平等地享有同一个文件存储单元
- 符号链接:一种特殊的文件,包含有一条绝对/相对路径指向其他文件或者目录的引用
- copy aaa.js ffff.js----------文件拷贝
- 会在硬盘中复制出来一份新的文件数据
- mklink /H bbb.js aaa.js----------建立了硬链接
- bbb.js : 新文件
- aaa.js:原文件
- 指向了磁盘中的同一份数据
- 只能操作文件
- mklink aaa.js hhh.js-------建立软连接
- 快捷方式
- 找到原文件
- 再找到磁盘中的数据