一、Git 代码版本管理工具
1.常用的git服务器
github | coding.net(码云)
2.git的常用命令
git init [project-name] //新建一个目录，将其初始化为Git代码库
git clone [url] //下载一个项目和它的整个代码历史
git add . //将工作区的“新建/修改”添加到暂存区
git checkout xxx // 恢复暂存区的指定文件到工作区
git commit -m "xxx" //将暂存区的内容提交到本地库
git status //显示有变更的文件
git push origin master //上传本地指定分支到远程仓库
git pull origin master //取回远程仓库的变化，并与本地分支合并
git branch //列出所有本地分支
git checkout -b [branch] //新建一个分支，并切换到该分支
git merge [branch] //合并指定分支到当前分支
git stash //能够将所有未提交的修改（工作区和暂存区）保存至堆栈中，用于后续恢复当前工作目录
git stash pop //将当前stash中的内容弹出，并应用到当前分支对应的工作目录上
二、chrome调试工具
常用的模块:Elements、console、debugger、Network、Application
三、Charles h5抓包工具
主要功能
1.查看网络请求（抓包）
手机电脑连接同一个局域网.
将手机代理连到电脑上.
手机浏览网页，即可抓包.
2.配置网址代理
菜单栏 [Tools] - [Map Remote] - [勾选Map Remote] -[add]代理
3.https请求被加密需要配置：
step1.菜单栏 [Proxy] - [SSl Proxying Settings] -[勾选SSl Proxying ]-[add] *:443.
step2.菜单栏 [Help] - [SSl Proxying] - [install]- 设备根据引导下载证书，即可查看到https的信息
四、webpack配置
webpack配置背景：
ES6模块化，浏览器暂不支持
ES6语法，浏览器并不完全支持
压缩代码，整合代码，让网页加载更快
webpack初始化搭建及配置
1.基础配置
-> 生成默认package.json的文件
npm init -y
-> 安装webpack
npm install webpack webpack-cli -D
-> 根目录新建src文件夹，并在文件夹下新建index.js
-> 根目录新建配置文件webpack.config.js
-> webpack.config.js下配置 [mode] [entry] [output]基础模块
2.打包模块配置
-> 在package.json配置：
在script下加命令"build":"webpack"
-> 命令行中运行：npm run build 即可完成打包
3.html插件配置
-> src文件夹下，新增index.html文件
-> 下载解析html的插件
npm install html-webpack-plugin -D
-> webpack.config.js下配置 [plugins] 模块
4.启动服务插件配置
-> 安装启动服务的插件
npm install webpack-dev-server -D
-> webpack.config.js下配置 [devServer]模块
-> 在package.json配置：在script下加命令
"dev": "webpack-dev-server"
-> 命令行运行：npm run dev
-> 浏览器输入 http://localhost:3000/ 即可访问
5.balbel配置(转义ES6)
-> 下载安装 babel 插件--
npm install @babel/core @babel/preset-env babel-loader -D
@组织名（babel）/属于该组织的包名（core）
@babel/core 包括了整个babel工作流核心
@babel/preset-env 预设
-> 根目录下新建.babelrc 文件配置：
{
"presets":["@babel/preset-env"]
}
--> webpack.config.js下配置module模块
module: {
rules: [{
test: /\.js$/,
loader: ["babel-loader"],
include: path.join(__dirname, 'src'),
exclude: /node_modules/
}]
},
6.配置webpack生产环境
--> 根目录下新建webpack.prod.js文件，
在webpack.config.js的基础上修改生产环境配置
--> 修改 mode为production
--> 删掉devServer模块
--> 配置output模块的filename属性，打包文件生成哈希值,代码变化，则文件名的哈希值发生变化
filename:'bundle.[contenthash].js',
--> 在package.json 文件更改script.build的配置，使打包文件指向webpack的生产环境配置
"build": "webpack --config webpack.prod.js",
最终配置的webpack.config.js文件为：
const path = require('path') //node的path模块
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
mode: 'development', //模式 development开发模式，production 生产模式 代码会被压缩
entry: path.join(__dirname, 'src', 'index.js'), //join():路径拼接; __dirname:当前路径
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test: /\.js$/,
loader:["babel-loader"],
include: path.join(__dirname, 'src'),
exclude:/node_modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename:'index.html'
})
],
devServer:{
port:3000,//端口
contentBase: path.join(__dirname, 'dist')
}
}
生产环境的配置的webpack.prod.js文件为：
const path = require('path') //node的path模块
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
mode: 'production', //模式 development开发模式，production 生产模式 代码会被压缩
entry: path.join(__dirname, 'src', 'index.js'), //join():路径拼接; __dirname:当前路径
output:{
filename:'bundle.[contenthash].js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test: /\.js$/,
loader:["babel-loader"],
include: path.join(__dirname, 'src'),
exclude:/node_modules/
}
]
},
plugins:[
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src', 'index.html'),
filename:'index.html'
})
],
}
五、linux命令
为什么用linux命令？
公司的线上机器一般都是linux(阿里云).
测试机也需要保持一致，用linux.
测试机或线上出现问题，本地不能复现，需要排查.
常用的linux命令
--> 本地登录线上机器
ssh work@192.168.10.21 // ssh 用户名@线上ip地址
--> 查看文件夹
ls
--> 查看文件夹(包括隐藏文件)
ls -a
--> 清屏
clear
--> 创建文件夹
mkdir abc //mkdir 文件名
--> 删除文件夹(包括文件夹内文件)
rm -rf abc //rm -r:递归删除f:强制删除 文件夹名
--> 删除文件
rm a.js //rm 文件名
--> 进入目录
cd dist //cd 文件名
--> 修改文件名
mv index.html index1.html //mv 修改的文件名 修改后文件名
--> 移动文件
mv index1.html ../ //mv 文件名 移动的路径
--> 拷贝文件
cp a.js a1.js //a.js 拷贝成 a1.js
--> 新建文件
touch d.js
--> 新建文件 并打开---
vi d.js
点击i进入编辑模式
进入 -- INSERT --模式可编辑
点击键盘【ESC】可退出 - INSERT --模式
输入 :w 内容即被写入
输入 :q 退出
输入 :q! 强制退出
--> 打开已有文件
vim e.js
--> 打印文件所有内容到控制台中
cat webpack.prod.js
--> 打印文件前几行内容到控制台中
head webpack.prod.js
--> 打印文件末几行内容到控制台中
tail webpack.prod.js
--> 在某文件中查找关键字
grep "babel" package.json //grep 关键字 文件
网友评论