npm笔记
NPM
介绍
全称:Node Package Manager , Node 的包管理器,也是一个应用程序。
包是什么
Node.js 的包基本遵循 CommonJS 规范,将一组相关的模块组合在一起,形成一个完整的工具
作用
通过 NPM 可以对 Node 的工具包进行搜索、下载、安装、删除、上传。借助别人写好的包,可以让我们的开发更加方便。
安装
安装完 nodejs 之后会自动安装 npm
常用命令
查看 npm 的版本
npm -v
初始化
npm init
npm init --yes ,直接参加创建 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" #版权声明
}
注意生成的包名不能使用中文,大写 !!! 不能使用 npm 作为包的名字
关于开源证书扩展阅读
http://www.ruanyifeng.com/blog/2011/05/how_to_choose_free_software_licenses.html
搜索包
npm search jquery
npm s jquery
一般在搜索工具包的时候,会到 https://npmjs.org 搜索
安装工具包
npm install jquery
npm i jquery
# 安装并在 package.json 中保存包的信息(dependencies 属性)
npm install jquery --save
npm install jquery -S
# 安装并在 package.json 中保存包的信息(devDependencies 属性)
npm install babel --save-dev
npm install babel -D
6 版本的 npm ,安装包时会自动保存在 dependencies 中,可以不用写 --save,不过为了适应旧版本,建议写的时候加上 --save
全局安装
npm install less -g
npm install webpack -g
npm install nodemon -g
全局安装一般用于安装全局工具,如 cnpm,yarn,webpack ,gulp等,全局命令的安装位置
C:\Users\你的用户名\AppData\Roaming\npm
安装依赖
根据 package.json 中的依赖声明, 安装工具包
成员一,用npm命令安装了很多工具包,储存在node_modules文件夹下,那么成员二如何不用挨个去安装工具包呢
1.成员一,用npm命令安装了很多工具包,储存在node_modules文件夹下,然后利用git命令将文件推送到远端(.gitignore文件中忽略node_modules),
不用将node_modules文件夹上传到远端,减轻上传压力,可以将package.json文件上传到远端,里头有安装包的依赖信息
2.成员二clone远端的代码,然后在该终端输入npm i 就可以自动就可以下载成员一的node_modules文件夹下的包
不用成员一个一个区下载npm的包
3.成员二在该终端输入,npm i --production // 只安装 dependencies 中的依赖
npm i
npm install
npm i --production // 只安装 dependencies 中的依赖
移除包
npm remove jquery
使用流程
团队开发时使用流程
- 从仓库中拉取仓库代码
- 运行 npm install 安装相关依赖
- 运行项目,继续开发
封装 NPM 包
创建自己的 NPM 包可以帮助代码进行迭代进化,使用步骤也比较简单
-
修改为官方的地址
-
创建文件夹,并创建文件index.js, 在文件中声明函数,使用 module.exports 暴露
-
npm 初始化工具包,package.json 填写包的信息
-
账号注册(激活账号)
-
命令行下 npm login 填写相关用户信息
-
命令行下 npm publish 提交包 👌
npm 有垃圾检测机制,如果名字简单或做测试提交,很可能会被拒绝提交
可以尝试改一下包的名称来解决这个问题
升级 NPM 包,需要修改 package.json 中的版本号修改,才能提交
CNPM
介绍
cnpm 是淘宝对国外 npm 服务器的一个完整镜像版本,也就是淘宝 npm 镜像,网站地址http://npm.taobao.org/
安装
安装配置方式有两种
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- alias cnpm="npm --registry=https://registry.npm.taobao.org
--cache=$HOME/.npm/.cache/cnpm
--disturl=https://npm.taobao.org/dist
--userconfig=$HOME/.cnpmrc"
使用
配置完成后,就可以使用 cnpm 命令来管理包,使用方法跟 npm 一样
cnpm install lodash
npm 配置镜像地址
//淘宝镜像
npm config set registry https://registry.npm.taobao.org
//官方镜像
npm config set registry https://registry.npmjs.org/
在发布工具的时候, 一定要将仓库地址, 修改为官方的地址
Yarn
介绍
yarn是 Facebook 开源的新的包管理器,可以用来代替npm。
特点
yarn 相比于 npm 有几个特点
- 本地缓存。安装过的包下次不会进行远程安装
- 并行下载。一次下载多个包,而 npm 是串行下载
- 精准的版本控制。保证每次安装跟上次都是一样的
安装
npm 安装
只需要一行命令即可安装 yarn
npm install yarn -g
msi 安装包安装
https://classic.yarnpkg.com/en/docs/install#windows-stable
相关命令
yarn 的相关命令
-
yarn --version
-
yarn init //生成package.json
-
yarn global add package (全局安装)
全局安装路径 C:\Users\你的用户名\AppData\Local\Yarn\bin
-
yarn add package (局部安装)
-
yarn add package --dev (相当于npm中的--save-dev)
-
yarn remove package
-
yarn list //列出已经安装的包名
-
yarn info packageName //获取包的有关信息
npm 5 引入离线缓存,提高了安装速度,也引入了 package-lock.json 文件增强了版本控制
yarn 修改仓库地址
yarn config set registry https://registry.npm.taobao.org
CYarn
跟 npm 与 cnpm 的关系一样,可以为 yarn 设置国内的淘宝镜像,提升安装的速度
npm install cyarn -g --registry "https://registry.npm.taobao.org"
配置后,只需将yarn改为cyarn使用即可
附录
关于版本号
版本格式:主版本号.次版本号.修订号
- "^3.0.0" :锁定大版本,以后安装包的时候,保证包是3.x.x版本,x默认取最新的。
- "~3.1.x" :锁定小版本,以后安装包的时候,保证包是3.1.x版本,x默认取最新的。
- "3.1.1" :锁定完整版本,以后安装包的时候,保证包必须是3.1.1版本。
笔记
今日内容
- 静态资源服务
- 响应表格
- 登录页面显示和用户数据获取
- Chrome 控制台查看请求响应
- NPM 介绍
- NPM 的基本使用
- 常用命令
- 创建一个属于自己的 NPM 包
- CNPM 介绍
- Yarn
- Cyarn
- NPM 运行脚本
域名 v.qq.com music.qq.com
xiaohigh.com 顶级域名(一级域名)
h5200318.xiaohigh.com 二级域名
www.xiaohigh.com 二级域名
music.qq.com 二级域名
baidu.com 一级域名
www.baidu.com 二级域名
ctrl + d 快速选中相同文本的内容
设置多个光标, 按住 alt 点击鼠标左键
页面右键查看源代码
源代码的内容就是『响应体』的内容
URL 的相对路径与绝对路径
- 如果以 / 开头则 URL 为绝对路径 /css/app.css /index.html
- 如果以 . 或者 ../ 或者是路径名称 css/app.css index.html ./index.html ../css
路径
url 路径
相对路径和绝对路径, 使用场景网页中 script 标签, link 标签, img 标签, AJAX
- 相对路径 ./ ../ css/app.css
- 绝对路径 /index.html /css/app.css
脚本中 fs 模块路径. 使用场景, 在 NodeJS 脚本中使用, fs 模块方法. readdir readFile writeFile ..
- 相对路径 ./ ../ css/app.css
- 绝对路径
- windows D:\www\day07\project\css\app.css
- Linux /www/project/css/app.css
GET 和 POST 请求的场景
GET
- 地址栏输入 url 请求
- a 链接
- form 表单 method 为 GET 的提交
- link
- script
- img
- AJAX GET 情况
POST
- 表单 method 为 POST 的提交
- AJAX POST 情况
表单 URL 的简写
当网页 URL 与提交的 URL 地址协议、域名以及端口都一致的时候可以简写
只有修改了 JS 脚本才需要重新启动服务.
格式化
shift + alt + F
网络控制台
vscode 设置代码片段
- 点击左下角齿轮 -> 用户代码片段 -> 点击新代码片段
- 在输入框中输入片段的名字
- 设置新建文件的属性
- scope 设置生效的文件
- prefix 简写的形式
- body 完整形式(如需换行, 则配置多个数组元素即可, 不能使用 ``)
关于包的文件
- package.json 是当前包的配置文件,dependencies 用来保存当前包的依赖信息 ,版本号(生产环境依赖) jquery vue
- package-lock.json 是一个锁文件, 用来控制包的版本
- node_modules 用来存放 npm 安装的工具包
npm 安装的工具包, 一般不会使用 link 或者 script 进行引入. 大多数都是使用 require 进行导入
node_modules 文件夹不进入仓库
package.json
- dependencies 用来保存当前包的依赖信息 (生产环境依赖) jquery vue
- devDependencies 用来保存开发时依赖信息(开发环境依赖) webpack gulp