git、npm、yarn、node、webpack学习及了解

一、Git ：git 是一个开源的分布式版本控制系统，不必服务器端软件支持（https://www.runoob.com/git/git-install-setup.html）
1、git安装配置：支持linux系统安装、window系统安装、mac安装
（1）软件安装 http://sourceforge.net/projects/git-osx-installer/ （根据系统下载对应的git，这里以mac为例）
（2）配置用户信息

$ git config --global user.name "runoob"  // 全局设置用户名
$ git config --global user.email test@runoob.com  // 全局设置用户邮箱
// 设置全局配置后以后你所有的项目都会默认使用这里配置的用户信息，也可以在单独的项目配置
// 可以使用 git config --list 查看配置信息。例如返回结果中有 
user.name=xuehua.zhao
user.email=xuehua.zhao@。。。
// 也可以直接查看某个特定的设置  git config user.name，返回xuehua.zhao

（3）生成公钥私钥：ssh-keygen -t rsa ‘邮箱’
查看公钥指令：cat ~/.ssh/id_rsa.pub (或在c盘中找ssh文件)

2、git 工作流程
（1）克隆 Git 资源作为工作目录。
（2）在克隆的资源上添加或修改文件。
（3）如果其他人修改了，你可以更新资源。
（4）在提交前查看修改。
（5）提交修改。
（6）在修改完成后，如果发现错误，可以撤回提交并再次修改并提交。

// 用到的指令
git clone gitHub或gitLab上项目的ssh协议地址或https（此操作涉及计算机间的加密登陆，需在git终端生成秘钥对，将公钥放置在ssh的setting中）
git status
git add .
git commit -m ''  // 提交到本地仓库
git pull  // 从追踪的远程对应分支上，拉取最新代码更新
git push // 提交到远程仓库，此时在本地对应追踪的远程分支上

3、git 工作区、暂存区、版本库概念
（1）工作区：就是自己电脑上可以看到的分支内容代码
（2）暂存区：git add 是将工作区的修改放到暂存区中（实质就是工作区的快照，也是下次commit的内容）
（3）版本库（本地仓库）：git commit后内容即在本地版本库中
实质：本地开发，git add 是将修改放到暂存区中，git commit 是将暂存区的内容放到本地版本库（即本地仓库），git push即放到远程仓库

⚠️ ：切换分支时注意git checkout 会将暂存区的内容带到新的分支（即光git add没git commit的内容），但不会带工作区中的内容。（一般切分支工作区中有改动没有add不会切分之成功）
4、如何创建git仓库
git init 创建一个.git的仓库，将所需资源放入其中
git clone git仓库地址

5、git 分支管理（增、删、合、切），可以从主线上分离，不影响主线的同时进行工作

// 创建新分支方法1
git branch 分支名 （即copy当前所在分支为新分支代码,已当前所在分支为基础，开发时记得在master所在分支开发，因为master是每次远程上线后最新的。）
// 创建新分支方法2（创建并切换至新创建的分支）
git checkout -b 新分支名（切换分支记得commit后或push后才可以，否则会将当前分支的暂存区的内容迁移至新分支。同时在项目开发的过程中一般在master上新建切换分支，否则一个分支基于一个分支，会将上一个的内容基础上开发，如果按顺序上线没事，不是的话，最后一个分支其实是所有的更改。它是gi t branch及git checkout的合并使用）
// 切换分支
git checkout 分支名 （切换到指定的分支，危险操作，记得commit或push后切，若不小心将原来带过来，此时git stash将原暂存区的放到脏工作树中(工作区和暂存区的内容)，想在哪个分支放出来就在哪个分支 git stash pop）
// 删除分支
git branch -d 分支名（删除本地已经推送至远程的本地分支，记得删除时不能在要删除的分支上，git checkout 别的分支）
git branch -D 分支名（若本地分支还没有推送远程或被合并，此时使用-D强制删除本地分支）
git push <remote> --delete <branch>    （例如：git push origin --delete 远程分支名。 或 git branch -r -d origin/branch-name） //删除远程分支    <remote> 意思是远程主机名，一般origin  <branch>指分支名称
// 合并分支
git merge branch2（将branch2分支名合并到当前所在的分支，如果有冲突手动解决冲突）经常用于合并master到当前分支，成最新代码
// 查看分支
（1）光查看本地分支（即本地仓库下的分支）
    git branch (只有自己电脑创建的本地分支)
    git branch -vv(查看本地分支且能看到与远程的追踪关系) // 20201111-IDSS-16188-logLink  98919e6 [origin/20201111-IDSS-16188-logLink] 合master
（2）光查看远程分支
    git branch -r
（3）查看本地分支和远程分支（所有分支）
    git branch -a

6、git 常用指令（https://www.yiibai.com/git/git_status.html）
（1）git status 查看状态（查看工作区与暂存区的状态，即看哪些更改已经添加到暂存区，哪些没有，哪些是新建的从未添加过）红色字体表示修改还未使用git add提交到暂存区（红色在工作树中），绿色表示已提交至暂存区（绿色在暂存区中）
（2）git add 将工作区修改提交至暂存区（实际存的都是快照，每次提交的文件暂存区为最新的快照 // git add [file1] [file2] … 将指定文件放到暂存区，可以提前git status查看有哪些文件变更
git add . 将所有变更放入暂存区（包含增、删、改）
（3）git commit 将暂存区的内容提交至仓库（本地仓库）
git commit -m ‘提示’ // 此命令只是提交暂存区内容至仓库，所以想提交的内容必须首先执行 git add .，注意备注也得写方便记录和查询每次的提交
git commit -a // 尽量用上一条命令。该命令是将工作树中的更改至仓库（实质是执行了add rm等命令后又执行了commit）
（4）git pull 取回远程主机某个分支的更新，再与本地的指定分支合并（实质是git fetch 与git merge 的缩写）
完整写法 git pull <远程主机名> <远程分支名>:<本地分支名>
// 例如将远程的next分支拉取与本地的master分支合并 git pull origin next:master
// 若将远程分支拉取合并在当前所在的本地分支，则可以省略本地分支 git pull origin next (即将远程next合在本地当前所在分支)
// 如果本地分支与远程分支存在一对一的追踪关系 git pull (将当前本地分支对应的远程分支拉取合并到当前本地分支)
// git clone项目时默认会将远程分支与本地分支同名即存在追踪关系，手动建立追踪关系git branch --set-upstream next2 origin/next （即本地next2分支追踪远程next分支）
还可以在push时建立追踪关系 git push --set-upstream origin 20210701-IDSS-21126-deleteGroupingLabel（将本地分支推送到对应的远程分支，这种写法建立起了追踪关系）
或 git checkout -b 本地分支名 origin/远程分支名 在本地建立分支并切换到新分支，建立的分支和远程关联起来。有追踪关系
（5）git push：本地分支的更新，推送到远程主机

// 完整写法
git push origin 本地分支名：远程分支名（即将本地的分支更改推送到指定远程分支）
// 省略远程分支的写法
git push origin 本地分支名（即将本地分支推送到远程同名分支上，如果远程没有此分支，则会新建一个）
git push --set-upstream origin 本地分支名（即将本地分支名推送到远程同名分支，同时建立了追踪关系）
// 只省略本地分支
git push origin :远程分支名（其实是推空的本地分支给指定的远程分支，实质就是删除远程分支 同 git push origin --delete 远程分支名）
// 本地分支与远程分支均省略
git push origin （将当前分支推送到远程仓库origin对应的追踪关系的分支上，这种写法针对有多个不同的仓库且追踪关系是一对一的）这种是存在追踪关系
// 主机名、本地分支、远程分支都省略
git push (只有一个主机名且存在一对一的追踪关系)
// 不管是否存在对应的远程分支，将本地所有分支推送到远程（不适用，不好）
git push --all origin
// 强推代码到远程
git push --no-verify

（6）git diff：比较差异

// 1、比较当前工作树与暂存区的区别 git diff (会列出改了没add到暂存区的内容)
// 2、比较两分支间的差异  git diff 分支1 分支2
// 3、比较文件的差异 git diff <file> 比较当前文件和暂存区文件差异
// 还有提交的差异或暂存库与版本的差异等，用时查

（7）git fetch(取回远程主机或分支的更新到本地仓库，一般不用，直接用git pull 就是git fetch与git merge的缩写)
（8）git merge（进行分支合并）
要合并到哪个分支切到哪个分支 git merge master 将master合到当前分支，有冲突手动解决冲突
// 移除了Removing 自动合并 Auto-merging 有冲突：CONFLICT (modify/delete): 删除或修改，要解决的冲突，后面有文件路径
// 最后提示 Automatic merge failed; fix conflicts and then commit the result. 自动合并失败，修复冲突然后提交结果的信息才需要手动解决冲突。
（9）git checkout：切换分支，危险的指令，因为它会重写工作树，切换时记得将更改内容都commit 了，否则会将暂存区的内容带到新切的分支
（10）git stash（将更改工作区及暂存区放置脏工作树中，得到干净的目录），以下是一种使用场景，但需要在commit前隐藏然后进行拉代码

 git pull  拉取远程更改时有冲突，拒绝合并，此时就可以将更改隐藏起来，拉取最新的代码到工作树中，在放出更改覆盖内容
 ...
file foobar not up to date, cannot merge.
$ git stash （是将未commit的内容包含工作区和暂存区的内容，放入堆栈中。可在任何分支将其放出来。）
$ git pull
$ git stash pop
// 方式2 使用 git fetch 在git merge 手动解决冲突

（11）git stash pop 放出脏工作树中的隐藏
（12）git config(可以用于设置用户名、邮箱即编译器等，也可以查配置)
（13）git help 会展示常用的git 指令供用户查看
（14）git reset 重置，一般用于撤销之前的一些操作，例如git add git commit 等
（15）git rm 从工作树暂存区删除文件 git rm text1.txt
（16）git mv 移动或重命名文件
$ git mv text.txt mydir 将 text.txt移至 mydir
(17) git log用于显示提交日志信息
(18) git remote 用于管理一组跟踪的存储库（例如远程仓库名是什么）

// git remote 列出已经存在的远程仓库名
origin
// git remote -v 列出详细信息
origin  http://git.oschina.net/yiibai/sample.git (fetch)

⚠️补充如何建立本地分支与远程分支的追踪关系

// 方法1 新建分支时
git checkout -b <本地分支名> <远程主机名>/<远程分支名>
// 方法2 手动建立（不建议用）
git branch --set-upstream 本地分支 origin/远程分支  以手动建立本地分支与远程分支的链接（追踪）关系，该命令前要先确保该本地分支和远程分支已存在。
// 方法3 推送时建立追踪关系
git push --set-upstream origin 本地分支名（这是将远程分支省略的写法，就是同名）

7、工作中的常用场景
（1）切新分支开发（每次记得在master是创建新分支进行开发，因为那个工作树都copy一份代码，因不能保证别的分支的上线顺序，否则就得基于上一分支的上线）

git checkout master
git pull
git checkout -b 新开发分支

（2）在已开发的本地分支去合master（因为在开发的过程中有别的项目上线了，所以master更新了，可能有冲突存在）

git checkout master
git pull //将本地master更新至最新代码再进行合并
git checkout 需要合并master的开发分支
git merge master 将master合在当前分支，有冲突时解决冲突，在提交至本地仓库及远程对应的分支

（3）将本地分支与本地分支合并

git checkout 最终要合并内容的分支
git merge 合并过来的分支

（4）将本地分支与远程分支合并

// 方法1 
git fetch 远程分支
git checkout 远程分支 
git merge 合并分支 （此时都是本地分支，要合到哪个切到哪个）
// 方法2 
git pull origin 远程分支名 （将远程分支拉取下来并合并到当前本地分支）
// 方法3 
在master上创建一个新的本地分支与远程分支关联并拉取代码
此时就是两个本地分支合并
git checkout 在本地起一个与远程同名分支（远程分支已经存在了），拉代码。此时本地与本地合并

（5）多人开发同一项目，即远程分支是一个

办法1、git checkout 远程起好的名
开发完直接提交即可
// 办法2  创建一个新的分支 提交拉取时指定远程对应分支
git push 的完整写法知识即可
// 办法3 创建分支时就建立追踪关系
git checkout -b <本地分支名> <远程主机名>/<远程分支名>

（6）还有可能项目多时出现在错的项目上切另一项目的本地分支，此时提示git上不存在
（7）项目安装依赖时切换源的问题：一般使用npm的源管理器 nrm。
1、全局安装nrm:npm install -g nrm
2、查看是否安装成功：nrm --version
3、查看有哪些源且目前在哪个上：nrm ls。（npm config get registry // 查看npm当前镜像源， yarn config get registry // 查看yarn当前镜像源）
4、添加新的公司源：nrm add bianlifeng https://registry.corp.bianlifeng.com/
5、切换源：nrm use npm（就是ls列出来的前面的字段）（或npm config set registry https://registry.npm.taobao.org/ // 设置npm镜像源为淘宝镜像，yarn config set registry https://registry.npm.taobao.org/ // 设置yarn镜像源为淘宝镜像
）
各个镜像源地址：
npm — https://registry.npmjs.org/
cnpm — https://r.cnpmjs.org/
taobao — https://registry.npm.taobao.org/
nj — https://registry.nodejitsu.com/
rednpm — https://registry.mirror.cqupt.edu.cn/
npmMirror — https://skimdb.npmjs.com/registry/
deunpm — http://registry.enpmjs.org/
（8）问题：vscode起项目时执行shell时间超长问题：
办法1:直接忽略在外面的终端走到项目源目录，进行起。
办法2:在vscode中搜 command+shiift+p:安shell command,然后在外侧的终端项目源目录输入：code .

（9）项目中安装依赖后起项目js及css/scss加载失败问题（下载时mac记得加sudo）
可能问题 node 版本问题 ，快速切换node 版本 可以安装n:npm install -g n,然后n 13.8.0或8.9.3等版本直接下直接切，后期直接 n 版本直接切
目录读写权限问题：https://baijiahao.baidu.com/s?id=1723058718794774392&wfr=spider&for=pc ，使用chmod进行更改
代理配置问题：必须选中mac否则无效

⚠️管理node时尽量不要使用全局的node,每个项目使用不同版本的node:使用nvm（后期实践）

// 知识点：可实现不同项目不同的node版本。由于 npm 安装的模块路径均为 /usr/local/lib/node_modules，当使用 n 切换不同的 node 版本时，实际上会共用全局的 node/npm 目录
（1）卸载全局安装的node/npm
首先，打开你 Finder，按 shift+command+G，打开前往文件夹的窗口，分别输入下列目录进去之后删除 node 和 node_modules 相关的文件和文件夹:
打开 /usr/local/lib，删除 node 和 node_modules 相关的文件和文件夹
打开 /usr/local/include，删除 node 和 node_modules 相关的文件和文件夹
如果你是使用的 brew install node 安装的 NodeJS，那么你还需要在终端中执行 brew uninstall node 命令来卸载
检查你的个人主文件夹下面的所有的 local、lib 以及 include 文件夹，并且删除所有与 node 和 node_modules 相关的文件以及文件夹
打开 /usr/local/bin 并删除 node 可执行文件


sudo rm /usr/local/bin/npm
sudo rm /usr/local/share/man/man1/node.1
sudo rm /usr/local/lib/dtrace/node.d
sudo rm -rf ~/.npm
sudo rm -rf ~/.node-gyp
sudo rm /opt/local/bin/node
sudo rm /opt/local/include/node
sudo rm -rf /opt/local/lib/node_modules

（2）安装：curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

（3）安装多版本node/npm
nvm install 8.12.0
（4）nvm提供了nvm use命令，可以方便切换版本，例如nvm use 4.2
每当我们安装了一个新版本 Node 后，全局环境会自动把这个新版本设置为默认。
nvm 提供了 nvm use 命令。这个命令的使用方法和 install 命令类似

(5)列出已安装的node:nvm ls

二、npm : 包管理器（npm是JavaScript的包管理工具，并且是 Nodejs平台的默认包管理工具，新版的NodeJS已经集成了npm，所以npm会随同NodeJS一起安装） https://www.npmjs.cn/
安装完nodeJ后，查看npm的版本，可更新自己想要的版本
npm -v // 2.3.0
npm install npm@lastest -g // 下npm的最新版本或制定版本 npm install npm@3.10.10 -g （cnpm是中国版本的npm）

npm包管理器的常用命令：（npm start ／npm run dev 等用于起项目，一般执行package.json的scripts的指令）
1、安装命令

// https://segmentfault.com/a/1190000014480038
##全局安装 // 全局安装，安装在Node安装目录下的node_modules下
npm install 模块名 -g    // npm install element-ui -g 
##本地安装//本地安装，安装到项目目录下，不在package.json中写入依赖
npm install 模块名
##一次性安装多个
npm install 模块1 模块2 模块3
##安装开发时依赖包
npm install 模块名 --save-dev //安装到项目目录下，并在package.json文件的devDependencies中写入依赖，简写为-D
##安装运行时依赖包
npm install 模块名 --save // -save会安装到项目目录下，并在package.json文件的dependencies中写入依赖，简写为-S
npm install 下载安装所有的依赖

2、查看安装目录

##查看项目中模块所在的目录
npm root
##查看全局安装的模块所在目录
npm root -g

3、查看npm的所有命令

npm help

4、查看某个包的各种属性

##查看某个包对于各种包的依赖关系
npm view 模块名 dependencies

5、查看包的源文件地址

##查看包的源文件地址
npm view 模块名 repository.url

6、查看当前模块依赖的node最低版本号

npm view 模块名 engines

7、更新node模块，卸载

npm update 模块名
##更新到指定版本(只能升不能降)
npm update 模块名 @版本号
##安装到最新版本
npm install 模块名@latest

npm uninstall 模块名

8、查看npm版本

npm -v // 查看npm的版本

缺点：npm 客户端把依赖安装到 node_modules 目录的过程具有不确定性。这意味着当依赖的安装顺序不同时，node_modules 目录的结构可能会发生变化。这种差异可能会导致类似“我的电脑上可以运行，别的电脑上不行”的情况，并且通常需要花费大量时间定为与解决（有时候就会遇到这种情况，完整可运行的项目上传到 git 上，别人 pull 下来以后，npm install 会报错）

解决：可以使用yarn解决由于语义版本控制而导致的 npm 安装的不确定性问题 npm install===yarn install 用于安装项目中所有的依赖

三、yarn 包管理器
1、安装

// mac的Homebrew 包管理工具 安装 Yarn,它跟git类似，也是终端（如果未安装node会自动安装）
brew install yarn
yarn --version

// npm来安装
npm install -g yarn

2、 yarn 常用指令 https://www.pengzhenjin.top/archives/yarn%E5%B8%B8%E7%94%A8%E5%91%BD%E4%BB%A4%E8%AF%A6%E8%A7%A3
（1）yarn install 安装全部依赖或直接yarn ===npm install
（2）yarn start /yarn run dev 等用于起项目 (yarn run [script]) 用来执行 package.json 中 scripts 属性下定义的脚本 yarn start ,执行 scripts 属性下 start 对应的脚本 node app.js. // “start”: “npm run dev || npm run clearStart”,
（3）yarn add [package] 下单独的项目 === npm install [package]
（4）yarn upgrade [package]@[version] 升级依赖包 ===npm update [package]
（5）yarn remove [package] 移除依赖包 ===npm uninstall [package]
（6）yarn list 列出项目的所有依赖

四、Homebrew：Mac OS平台下的软件包管理工具
（1）$ brew install
（2）$brewinstallnode//安装node（3）$ brew uninstall 包 // 卸载包
（4）$ brew update 更新Homebrew
（5）$ brew -v // 查看Homebrew版本

五、node.js： Node.js 就是运行在服务端的 JavaScript。 https://www.runoob.com/nodejs/nodejs-mysql.html
Node.js 是一个平台，一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎（V8引擎执行Javascript的速度非常快，性能非常好）

1、安装 brew install node
2、检测是否安装成功 node -v

六、webpack : JavaScript 应用程序的 静态模块打包工具
他会根据入口起点构建，找出哪些是入口起点依赖的模块和库
使用依赖node.js，

./src/index.js    // 默认值

输出是告诉webpack在哪里输出构建的默认值是 ./dist/main.js