前端开发环境相关基础

对开发环境足够的掌握，可以提高工作产出的效率

git 最常用的代码管理工具

1. 多人协同开发
2. 分布式代码存储
3. 版本管理

git add .
git checkout xxx // 回滚
git commit -m 'xxx'
git push origin master
git pull origin master
git branch
git checkout -b xxx / git checkout xxx  // 切换分支
git merge xxx

git log
git show xxx

git stash // 将刚修改的内容暂存到一边
git stash pop // 将暂存的内容再整回来

// 分支合并流程
git fetch // 拉取所有分支内容
git branch // 查看分支是否拉取到本地
git checkout 分支名 // 切换到需要操作的分支
git pull origin 分支名  // 更新分支内容
git checkout master
git merge 分支名 // 合并分支名分支至当前分支
// 处理冲突conflict
git add . 
git commit -m ''
git merge
git log
git push

chrome 调试工具 devtools

• elements：dom结构、css样式
• console：打印
• application： 本地存储
• network： 资源加载，网络数据
• sources： debugger 、打断点

抓包

• fiddler（windows）
• charles(mac)
• 手机、电脑在同一个局域网内
• 手机代理到电脑上
• 手机浏览网页，即可抓包
• 查看网络请求
• 网络代理
• https：根据提示手机安装对应证书

webpack

npm i webpack webpack-cli -D --registry=htpps://registry.npm.taobao.org
npm i html-webpack-plugin webpack-dev-server

• 配置文件默认名称webpack.config.js，遵循nodejs cmd规范，使用require引入文件

• es6模块化、语法

• 压缩、整合代码，让网页加载更快

• 生产环境打包：

  • devserver不需要了
  • mode改为“production”
  • output.filename: 添加[cententhash],最大程度命中html缓存
  • package.script.build: webpack --config webpack.prod.js 默认压缩

babel 高级语法转义到低级语法，用以兼容各种浏览器、运行环境

npm i @babel/core @babel/preset-env babel-loader

• 配置文件 .babelrc
• webpack配置文件里需要加上 module：{rules:[]}相关配置

module:{
  rules:[
    test:/\.js$/,
    loader:['babel-loader'],
    include:path.jion(__dirname,'src')
    exclude:/node_modules/
  ]
}

ES6模块化

• 解构和单个导出不可兼得

// 单个导出
export default {}
import x from x;

// 解构赋值
export {x}
import {x} from x;

linux常用命令

• 测试机余姚尽量与线上机器环境保持一致，线上服务器一般都是linux
• ssh username@ip地址/机器名
• ls -a 、 ll
• clear // 清除
• mkdir // 创建文件夹
• rm -rf 文件夹名 // 递归强制删除文件夹
• mv oldname newname // 修改文件名、移动文件位置
• cp a.js a1.js // copy 文件
• touch 文件名 // 新建文件
• vi 文件名 // 新建文件并进入vi编辑模式/查看文件
• cat 文件名 // 查看文件
• head/ tail 文件名 // 查看文件的开始、结尾
• grep ‘xx’ 文件名 // 搜索文件中的xx
• vimtutor // vim教程