晓喻新生

一、NPM&YARN

1.什么是Node

前端页面主要是由HTML、CSS、JavaScript三部分构成，以及由java，C，Python等工具提供后端数据服务。Node.js大部分基本模块都用JavaScript语言编写。在Node.js出现之前，JavaScript通常作为客户端程序设计语言使用，以JavaScript写出的程序常在用户的浏览器上运行。Node.js的出现使JavaScript也能用于服务端编程。Node.js含有一系列内置模块，使得程序可以脱离Apache HTTP Server或IIS，作为独立服务器运行。

node全称Node.js，是一个基于Chrome V8引擎的JavaScript运行环境，一个让JavaScript 运行在服务端的开发平台；它让JavaScript成为与PHP、Python、Perl等服务端语言平起平坐的脚本语言。

可以在node中进行I/O操作、文件操作、数据库操作
node提供了JavaScript实现后端数据服务的能力。

node.js安装官网

2.Npm包管理工具

1.Npm是什么

JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。Npm的主要作用就是用来管理可复用的代码包。

2.Npm包官方建议至少包含：

package.json 描述文件。是Npm的‘身份名片’，它描述了包的各类重要信息。
index.js 代码入口
README.md 文档说明

3.Npm包脚本

npm允许在package.json文件里面，使用scripts字段定义脚本命令,例如：

{
  "scripts":{
    "start":"node index.js"
  }
}

当执行npm start时执行index.js

4.Npm安装命令

npm install[包名]@[版本号]安装带个指定包
npm install安装项目package.json所有依赖
npm list查看安装模块。加-g查看全局安装模块
npm uninstall[包名]卸载模块
npm update[包名]更新模块

npm 的包安装分为本地安装（local）、全局安装（global）两种，从敲的命令行来看，差别只是有没有-g。

npm install express      # 本地安装
npm install express -g   # 全局安装

本地安装

将安装包放在 ./node_modules 下（运行 npm 命令时所在的目录），如果没有 node_modules 目录，会在当前执行 npm 命令的目录下生成 node_modules 目录。
可以通过 require() 来引入本地安装的包。

全局安装

将安装包放在 /usr/local 下或者你 node 的安装目录。
可以直接在命令行里使用。

5.Npm包依赖

npm install[包名] -save：在生产环境中需要依赖的包
npm install[包名] -save-dev：仅在开发和测试环境中需要依赖的包

6.初始化npm模块指令

npm init：在node开发中使用npm init会生成一个pakeage.json文件。

执行npm init是需要在DOS窗口执行的，我们可以windows+r键来打开窗口，然后输入CMD执行，然后就可以打开DOS窗口了。打开窗口之后，在DOS窗口中进入自己项目所在的目录。

配置信息介绍：

属性	描述
package name	项目名字
version	版本号
description	项目描述
entry point	项目入口文件
test command	项目启动的时候要用什么命令来执行脚本文件，默认node index.js
git repository	如果需要上传到git中的话，需要填写git仓库地址
keywirds	项目关键字
author	发行作者名字
license	发行项目需要的证书

7.Npm版本号

使用NPM下载和发布代码时都会接触到版本号。NPM使用语义版本号来管理代码，语义版本号分为X.Y.Z三位，分别代表主版本号、次版本号和补丁版本号。当代码变更时，版本号按以下原则更新。

如果只是修复bug，需要更新Z位。
如果是新增了功能，但是向下兼容，需要更新Y位。
如果有大变动，向下不兼容，需要更新X位。

8.Npm的未来：npm5.0

npm5.0的发布性能得到了普遍的提升，相关内容自行查询，这里不做介绍。

3.Yarn包管理工具

Yarn逐渐成为了包管理的主流工具

1.Yarn安装

控制台输入：npm install --global yarn

2.Yarn常用命令

yarn init：初始一个项目
yarn add [包名]：添加依赖包。--dev添加到devDependencies；--peer添加到peerDependencies；--optionalDependencies。
yarn upgrade [包名]：升级依赖包
yarn remove [包名]：移出依赖包
yarn 或者 yarn install：安装项目的全部依赖

3.Yarn.lock

Yarn.lock锁定唯一版本！

package.json 里定义的是版本区间，如^1.0.0
而 yarn.lock 里的version字段是唯一的版本号，如1.0.0

4.Npm & Yarn 对比

1.命令对比

NPM	YARN	作用
npm init	yarn init	初始化项目
npm install/link	yarn install/lin	默认依赖安装
npm install taco --save	yarn add taco	安装某个依赖
npm uninstall taco --save	yarn remove taco	移除某个依赖
npm install taco --dev-save	yarn add taco --dev	安装某个开发时依赖
npm update taco --save	yarn upgrade taco	更新某个依赖
npm install taco --global	yarn global add taco	安装某个全局依赖
npm publish/login/logout	yarn publish/login/logout	发布/登录/登出
npm run/test	yarn run/test	允许某个命令

2.Npm & Yarn

Yarn速度快
Yarn安卓版本统一
Yarn输出去简介
Yarn多注册来源管理
Yarn更语义化

二、Git代码管理

1.GIT介绍

Git是目前世界上最先进的分布式版本控制系统，可以有效、高速地处理从很小到非常大的项目版本管理。也是 Linus Torvalds 为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件。Git能自动记录每次文件的改动，而不是记录一堆相似的副本。

Git优点

离线开发,git的模式使得使得每个开发者的电脑上均有一套代码,随时随地可开发,无需联网,很多工具一旦离开网络或服务器就会出问题，开发者几乎就完全无法工作；
适合分布式开发，部署非常方便。基本几个命令就可以部署一个环境或服务器
分支机制非常优秀，使得主干和分支脉络清晰，易于管理；
开发灵活，可以非常容易的解决两个开发者之间的冲突。当有冲突时pull下来对比，将冲突处理后合并，在push就解决了，非常方便。

Git安装

2.Git基础概念和相关指令

工作区：就是你在电脑里能看到的目录

暂存区：英文名叫stage或者index。一般存放在.git目录下的index文件所以我们把暂存区也叫做索引（index）。

版本库：工作区有一个隐藏目录.git，这个不算工作区，而是Git的版本库也称仓库。

分支：开发过程中要选择的一条路。你可以选择和其他开发者一起走同一条路
也有可以自己走一条路,路与路之间无影响,你可以随时让两条路合并

部分常见指令：

1.git add

git add 文件名提交指定文件到暂存区
git add . 提交所有新增文件和修改操作到暂存区
git add -A 提交所有变化到暂存区
git add -u 提交修改和删除操作到暂存区,但不提交新增文件

2.git commit

git commit -m 将暂存区改动提交到本地仓库
git commit -am 将已经追踪的文件的修改(包括未提交到暂存区)提交到本地仓库
git commmit -a -m 等价于-am.但注意不能写成-m -a

3.git status 显示工作目录和暂存区状态

4.git log :查看提交历史

5.git reset：版本回退

6.git diff：查看修改内容

7.git fetch：从另一个存储库下载对象和引用

8.分支的创建和切换

创建本地仓库时,默认只有一个分支,即master分支,叫做主分支
创建: git checkout -b dev(创建并且切换到dev分支)
合并:git checkout master//切换到master分支
git merge dev//将指定分支(dev)合并到master上

3.GIT本地仓库管理

1.创建仓库

找到一个合适的文件夹；
输入git init使这个文件夹变成仓库。
文件夹会有一个.git的文件，这个目录是Git来跟踪管理仓库的。

2.本地仓库管理

下述步骤请务必自行动手操作。

我们编写一个test.txt文件并放到仓库目录下（子目录也行）。
使用git add和git commit将该文件添加到仓库中。
修改test.txt文件内的内容。
运行git status命令查看结果。
可以执行git diff查看具体修改内容。
再次使用git add和git commit将文件添加得到仓库中。
使用git log命令显示从最近到最远的提交日志信息，可以看到我先后提交了两次test文件，时间作者修改内容以及一长串的commit id均可以看到。
若我们发现现在版本不合适需要回退到上个版本可以使用git reset命令。例如：git reset --hard HEAD^(版本号)。在Git中，用HEAD表示当前版本，也就是最新的提交，上个版本是HEAD^，上上个版本是HEAD^^，若往上n个版本也可以写成HEAD~n。
若这个reset后我们又想回到之前的版本，使用指令git reflog查看，然后使用git reset id(前面十六进制数部分，例如：94defc1)
若你想丢弃当前工作区使用git checkout -- test.txt命令回到上一次git add和git commit位置。
删除test文件，你想恢复使用指令git checkout -- test.txt进行恢复。
删除test文件，你想从仓库中删除使用指令git rm test.txt然后git commit。

上述步骤请务必自行动手操作。

4.GIT远程仓库管理

git pull 拉取远端分支到本地,并指定分支合并, 相当于fetch+merge
git push<远程主机名><远程分支名>:<本地分支名>将本地分推到指定远程仓库的指定分支

远程仓库克隆git clone 仓库地址
在本地仓库中进行操作
然后使用git push提交到git远程仓库中

注：有时会出现无法同步的情况可能需要修改本地配置文件config，原因是没有权限。需要修改为url=https://用户名：密码@[http://github.com/](http://github.com/ )用户名/仓库名.git

5.GIT冲突

1.Git冲突是什么

冲突可以说是两个分支的冲突。具体是两个已经提交的分支的相同文件相同位置的的不同操作进行了合并。

2.Git冲突解决

冲突查看

用git status可以查看冲突文件。
再用git diff指令查看具体哪里起冲突。

冲突解决

git checkout master：切换分支到master
git pull：拉取master分支最新代码
git merge dev：合并分支dev到master

注意：一般情况不能这样简单的解决，这里就不进行深入讲解

6.GIT工作流程

克隆Git资源作为工作目录。
在克隆的资源上添加或者修改文件。
如果其他人修改了，你可以更新资源。
在提交前查看修改。
提交修改。
在修改完成后，如果发现错误，可以撤回提交并再次修改并提交。

7.GIT常见分支规范

feature：业务/技术需求功能开发，命名规范：feature/{版本}{需求}{RD}。
release：用于集成环境测试、ST环境测试、灰度发布。release分支只有一个，少数场景下需要并行的版本，可以单独再拉一条。
master：用于发布，打tag。
hotfix：用于解决线上问题，开发测试阶段的bugfix请在各自的feature分支上改代码。命名规范：hotfix/{描述}_{RD}。

三、调试工具

1.开发人员工具

点击位于浏览器用户界面右上角的“页面”下拉菜单，“更多工具”→“开发人员工具”。
右键点击网页上的任一元素，在弹出菜单中选择“检查”（不同浏览器可能不一样）。
在 Windows操作系统上，使用 F12或Ctrl+Shift+I 快捷键打开开发人员工具（或使用 Ctrl+Shift+J 直接进入 JavaScript 控制台）。
Cmd + Opl +I（Mac）

2.元素面板(Element)

该面板可以用来查看、修改、删除、禁用页面源代码HTML上的任意元素，包括DOM标签以及css样式的查看、修改、删除、禁用，还可以展示相关盒模型的图形信息，以及在浏览器上实时得到反馈。

3.控制台面板(Console)

常用的console.log()方法打印的信息内容就可以在这上面进行查看，console 中有很多对我们调试代码有帮助的函数，我们可以在开发环境中配合 console 来调试代码，使得我们测试更加便利。

方法	用途
console.log(data)	打印需要打印的内容
getEventListeners(document.getElementById ("eventListeners")).click[0].listener	查看某个DOM对象上的事件
inspect(document.body)	Elements面板跳到需要查看的对象上
console.dir(document.body);	将一个 JavaScript 对象的所有属性和属性值显示成一个可交互的列表,以树的结构进行输出
monitorEvents(document.body, "click")	监控相关的事件,unmonitorEvents便是用来停止这一监控
clear()	清理控制台

4.源代码面板(Sources)

在源代码面板中可以设置断点来调试 JavaScript ，或者通过Workspaces（工作区）连接本地文件来使用开发者工具的实时编辑器。

5.网络面板(Network)

可以看到所有的资源请求，包括网络请求，图片资源，html,css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看。

6.性能面板(Performance)

使用性能面板可以通过记录和查看网站生命周期内发生的各种事件来提高页面的运行时性能

7.内存面板(Memory)

如果需要比性能面板提供的更多信息，可以使用内存面板，例如跟踪内存泄漏

8.应用面板(Application)

该面板可以检查、修改、删除IndexedDB与Web SQL数据库，本地和会话存储，cookie，应用程序缓存，图像，字体和样式表。点击一次按钮即可清除所有存储、数据库、缓存和服务工作线程。

9.安全面板(Security)

使用 Security Overview 可以立即查看当前页面是否安全。检查各个源以查看连接和证书详情（安全源）或找出具体哪些请求未受保护（非安全源）。

10.检查面板(Audits)

对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议

注：若需要深入各种面板用法自行查找资料。

四、代码工具

网上有许多编辑器，优缺点各异选择自己喜欢的编辑器就行了，这个自行查找资料。常见的有HBuilder、WebStorm、Sublime Text、Visual Studio Code、wampServer、eclipse。电脑自带的记事本也能标记前端代码，但仅只能用编辑，不具备集成开发环境，唯一优点就是简介，没有花里胡哨的功能。