首页  思维导图  详情

开发环境

2021-03-24 15:04:01   0  举报





仅支持查看

AI智能生成

前端面试_开发环境

前端面试

开发环境

作者其他创作

大纲/内容

git 常用命令

git add . 把所有修改后的文件添加到本地 git checkout xxx 把 xxx 文件还原到未修改的状态 git commit -m "xxx" 提交一条记录 git push orign master 把分支推送到远程服务端 git pull origin master 从远程服务端拉取分支 git branch 查看分支 git checkout -b xxx 创建并切换分支 git checkout xxx 切换分支 git merge xxx 把 xxx 分支合并到当前分支

git stash 暂存工作区代码 git stash list 查看 stash git stash pop 恢复工作区，同时删除 stash 内容

chrome 调试工具

Elements Console Source Network Application debugger

移动端 H5 抓包

工具

windows 用 Fiddler Mac OS 用 Charles

抓包

流程

<ol><li>手机和电脑连同一个局域网</li><li>将手机代理到电脑上（电脑的IP）</li><li>手机浏览网页，即可抓包</li><li>查看网络请求</li></ol>

网址代理

Charles: Tools -> Map Remote Settings -> Enable Map Remote

https

Charles: <ol><li>Proxy -> SSL Proxy Settings -> Enable SSL Proxy</li><li>Help -> SSL Proxying -> Install Charles Root Certificate on a Mobile</li></ol>

webpack 配置

<ul><li>ES6模块化，浏览器暂不支持</li><li>ES6语法，浏览器并不完全支持</li><li>压缩代码，整合代码，让网页加载更快</li></ul>

如何配置 babel

webpack.config.js

html-webpack-plugin 解析 HTML webpack-dev-server 启动服务

@babel/core babel 的核心，把 ES6 转成 ES5 @babel/preset-env babel 配置的集合，在 .babelrc 文件中配置 {"presets": ["@babel/preset-env"]} babel/loader 给webpack用的插件

ES6 的模块化

export 导出

可分别导出，或导出集合

只导出一个，用 export default，但导入时不可用解构赋值

import 导入

import { fn, a, b }  from './a'; // 解构赋值 import c from './c'; // 非解构赋值

如何配置 webpack 生产环境

webpack.prod.js

mode: 'production'

contenthash 根据代码内容算出来一个不规则的 hash 值； 如果代码内容变了，hash 值会变； 如果代码内容不变，hash 值不变。

能最大程度让文件命中 http 缓存，让页面加载更快

前端常用的 linux 命令

ssh @<userName>/<IP> 输入密码后，登录 linux 线上机

ls 查看文件夹 ls -a 查看所有文件，包括隐藏文件 ll 列表形式查看文件 clear 清屏 mkdir <file> 创建文件夹 rm <file> 删除文件 rm -rf <file> 删除文件夹 cd <path> 定位到目录 mv <name> <newName> 修改文件名 mv <file> <path> 移动文件 cp <file1> <file2> 拷贝

vi <file> 新建并打开 vim 编辑器 vim <file> 打开 vim 编辑器查看 cat <file> 打印文件内容 head <file> 打印文件头几行 tail <file> 打印文件尾几行 grep <keywork> <file> 查找关键字

vim 编辑器

i 进入 INSERT 模式 ESC 退出 INSERT 模式  :w 写入 :q 退出 vim :q! 强制退出 vim，不保存修改内容

vimtutor 学习 vim 相关命令