前端开发环境相关基础
对开发环境足够的掌握，可以提高工作产出的效率
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 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教程
