前端开发环境总结

git

• 常用命令：
  git add.
  git checkout XXX
  git commit -m “xxx”
  git push origin master
  git pull origin master
  git branch
  git checkout -b xxx
  git merge xxx
  git diff
  git log
  git stash 暂存修改
  git stash pop 把修改放出来
  git log --oneline --graph
  git branch -av 查看远端修改
  git checkout -b test remotes/origin/test 创建test分支并且与远端关联

调试工具

• chrome debugger ：打断点

抓包

• 移动端h5页，查看网络请求，需要工具抓包
• windows 一般用fiddler
• Mac Os 一般用Charles 设置代理连接手机
• 手机电脑连同一个局域网
• 将手机代理到电脑上
• 手机浏览网页即可抓包
• 查看网络请求
• 网址代理
• https 开启ssl proxysetting 添加*:443 在帮助里找到下载证书地址并安装证书

webpack babel

es6模块化 浏览器不支持
压缩袋吗整合代码加载更快
webpack 搭建过程：
npm init -y
npm i webpack webpack-cli -D
webpack.config.js :
module.exports ={
…
}
html-webpack-plugin:解析html插入bundle.js 放到dist里
webpack-dev-server
bable 转义es6

linux 常用命令

• 为什么学linux命令？
  公司线上机器一般都是linux（免费开源）
  测试机也要保持一致，用linux
  测试机或者线上机出了问题，本地又不能复现，需要去排查
• 常用命令
  登录线上机器：ssh 用户名@ip地址
  回车输入密码：
  ls 查看文件
  ls -a 查看所有文件
  ll 看文件列表形式
  mkdir 创建文件夹
  rm -rf 文件名 删除文件夹
  cd 目录 进入目录
  mv a.js b.js 修改文件名
  mv a.js …/a.js 移动 文件
  cp a.js b.js 拷贝复制
  touch a.js 新建文件
  vi a.js 新建且打开 i insert模式 ：w 保存 ：q退出
  vi a.js 打开文件
  cat a.js 查看文件
  head a.js 查看前面几行
  tail a.js 查看末尾几行
  grep “…” 文件名 查找关键字
  vimtutor vim教程