前端常用的开发环境核心内容整理[ git | chrome | h5抓包 | webpack | linux ]

一、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 关键字 文件