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

使用流程

团队开发时使用流程

1. 从仓库中拉取仓库代码
2. 运行 npm install 安装相关依赖
3. 运行项目，继续开发

封装 NPM 包

创建自己的 NPM 包可以帮助代码进行迭代进化，使用步骤也比较简单

0. 修改为官方的地址

1. 创建文件夹，并创建文件index.js， 在文件中声明函数，使用 module.exports 暴露

2. npm 初始化工具包，package.json 填写包的信息

3. 账号注册（激活账号）

4. 命令行下 npm login 填写相关用户信息

5. 命令行下 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 的相关命令

1. yarn --version

2. yarn init //生成package.json

3. yarn global add package (全局安装)

​ 全局安装路径 C:\Users\你的用户名\AppData\Local\Yarn\bin

4. yarn add package (局部安装)

5. yarn add package --dev (相当于npm中的--save-dev)

6. yarn remove package

7. yarn list //列出已经安装的包名

8. yarn info packageName //获取包的有关信息

9. yarn //安装package.json中的所有依赖

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版本。

笔记

今日内容

0. 静态资源服务
1. 响应表格
2. 登录页面显示和用户数据获取
3. Chrome 控制台查看请求响应
4. NPM 介绍
5. NPM 的基本使用
6. 常用命令
7. 创建一个属于自己的 NPM 包
8. CNPM 介绍
9. Yarn
10. Cyarn
11. 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 设置代码片段

1. 点击左下角齿轮 -> 用户代码片段 -> 点击新代码片段
2. 在输入框中输入片段的名字
3. 设置新建文件的属性
   1. scope 设置生效的文件
   2. prefix 简写的形式
   3. 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

全局安装只需要一次就可以了