一耸彪、Git 代碼版本管理工具
1.常用的git服務(wù)器
github | coding.net(碼云)
2.git的常用命令
git init [project-name] //新建一個目錄，將其初始化為Git代碼庫
git clone [url] //下載一個項目和它的整個代碼歷史
git add . //將工作區(qū)的“新建/修改”添加到暫存區(qū)
git checkout xxx // 恢復(fù)暫存區(qū)的指定文件到工作區(qū)
git commit -m "xxx" //將暫存區(qū)的內(nèi)容提交到本地庫
git status //顯示有變更的文件
git push origin master //上傳本地指定分支到遠程倉庫
git pull origin master //取回遠程倉庫的變化滴某，并與本地分支合并
git branch //列出所有本地分支
git checkout -b [branch] //新建一個分支，并切換到該分支
git merge [branch] //合并指定分支到當(dāng)前分支
git stash //能夠?qū)⑺形刺峤坏男薷模üぷ鲄^(qū)和暫存區(qū)）保存至堆棧中，用于后續(xù)恢復(fù)當(dāng)前工作目錄
git stash pop //將當(dāng)前stash中的內(nèi)容彈出，并應(yīng)用到當(dāng)前分支對應(yīng)的工作目錄上
二酪碘、chrome調(diào)試工具
常用的模塊:Elements、console盐茎、debugger兴垦、Network、Application
三字柠、Charles h5抓包工具
主要功能
1.查看網(wǎng)絡(luò)請求（抓包）
手機電腦連接同一個局域網(wǎng).
將手機代理連到電腦上.
手機瀏覽網(wǎng)頁探越，即可抓包.
2.配置網(wǎng)址代理
菜單欄 [Tools] - [Map Remote] - [勾選Map Remote] -[add]代理
3.https請求被加密需要配置：
step1.菜單欄 [Proxy] - [SSl Proxying Settings] -[勾選SSl Proxying ]-[add] *:443.
step2.菜單欄 [Help] - [SSl Proxying] - [install]- 設(shè)備根據(jù)引導(dǎo)下載證書，即可查看到https的信息
四窑业、webpack配置
webpack配置背景：
ES6模塊化钦幔，瀏覽器暫不支持
ES6語法，瀏覽器并不完全支持
壓縮代碼常柄，整合代碼鲤氢，讓網(wǎng)頁加載更快
webpack初始化搭建及配置
1.基礎(chǔ)配置
-> 生成默認(rèn)package.json的文件
npm init -y
-> 安裝webpack
npm install webpack webpack-cli -D
-> 根目錄新建src文件夾，并在文件夾下新建index.js
-> 根目錄新建配置文件webpack.config.js
-> webpack.config.js下配置 [mode] [entry] [output]基礎(chǔ)模塊
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.啟動服務(wù)插件配置
-> 安裝啟動服務(wù)的插件
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配置(轉(zhuǎn)義ES6)
-> 下載安裝 babel 插件--
npm install @babel/core @babel/preset-env babel-loader -D
@組織名（babel）/屬于該組織的包名（core）
@babel/core 包括了整個babel工作流核心
@babel/preset-env 預(yù)設(shè)
-> 根目錄下新建.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生產(chǎn)環(huán)境
--> 根目錄下新建webpack.prod.js文件卷玉，
在webpack.config.js的基礎(chǔ)上修改生產(chǎn)環(huán)境配置
--> 修改 mode為production
--> 刪掉devServer模塊
--> 配置output模塊的filename屬性，打包文件生成哈希值,代碼變化秸架，則文件名的哈希值發(fā)生變化
filename:'bundle.[contenthash].js',
--> 在package.json 文件更改script.build的配置揍庄，使打包文件指向webpack的生產(chǎn)環(huán)境配置
"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開發(fā)模式，production 生產(chǎn)模式 代碼會被壓縮
entry: path.join(__dirname, 'src', 'index.js'), //join():路徑拼接; __dirname:當(dāng)前路徑
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')
}
}
生產(chǎn)環(huán)境的配置的webpack.prod.js文件為：
const path = require('path') //node的path模塊
const HtmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
mode: 'production', //模式 development開發(fā)模式东抹，production 生產(chǎn)模式 代碼會被壓縮
entry: path.join(__dirname, 'src', 'index.js'), //join():路徑拼接; __dirname:當(dāng)前路徑
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.
測試機或線上出現(xiàn)問題食茎，本地不能復(fù)現(xiàn)蒂破，需要排查.
常用的linux命令
--> 本地登錄線上機器
ssh work@192.168.10.21 // ssh 用戶名@線上ip地址
--> 查看文件夾
ls
--> 查看文件夾(包括隱藏文件)
ls -a
--> 清屏
clear
--> 創(chuàng)建文件夾
mkdir abc //mkdir 文件名
--> 刪除文件夾(包括文件夾內(nèi)文件)
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 內(nèi)容即被寫入
輸入 :q 退出
輸入 :q! 強制退出
--> 打開已有文件
vim e.js
--> 打印文件所有內(nèi)容到控制臺中
cat webpack.prod.js
--> 打印文件前幾行內(nèi)容到控制臺中
head webpack.prod.js
--> 打印文件末幾行內(nèi)容到控制臺中
tail webpack.prod.js
--> 在某文件中查找關(guān)鍵字
grep "babel" package.json //grep 關(guān)鍵字 文件
