开发和调试

一、Git

Git 是最常用的代码版本管理工具，常用 git 命令有：

git status
git diff
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

二、调试

1、Chrome 调试工具

• Elements：当前 DOM 结构展示
• Console：控制台
• Sources/Debugger：资源文件查看，代码执行过程查看
• Network：各类资源、请求等的加载情况
• Application：操作本地存储

2、抓包

移动端 h5 页，查看网络请求，需要用工具抓包

• Windows 一般用 fiddler
• Mac OS 一般用 charles

抓包流程：

1. 手机和电脑连同一个局域网
2. 将手机代理到电脑上
3. 手机浏览网页，即可抓包
4. 抓包后可以进行，查看网络请求、网址代理、https 等操作

三、Webpack 和 Babel

首先

• ES6 模块化，浏览器暂不支持
• ES6 语法，浏览器并不完全支持
• 需要压缩代码，整合代码，以让网页加载更快

基础用法示例：
webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    // mode 可选 development 或 production ，默认为后者
    // production 会默认压缩代码并进行其他优化（如 tree shaking）
    mode: 'development',
    entry: path.join(__dirname, 'src', 'index'), // 入口文件，__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'),  // 根目录
        open: true,  // 自动打开浏览器
    }
}

webpack.prod.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    mode: 'production',
    entry: path.join(__dirname, 'src', 'index'),
    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'
        })
    ]
}

.babelrc

{
    "presets": ["@babel/preset-env"],
    "plugins": []
}

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.6.2",
    "@babel/preset-env": "^7.6.2",
    "babel-loader": "^8.0.6",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.1"
  }
}

四、Linux 命令

1. 连接服务器

ssh username@ip
如：ssh root@114.67.85.117

1. 常用操作

• 查看列表：ll 或 ls
• 创建文件夹：mkdir file
• 创建文件：touch file 或 vi file
• 删除文件夹：rm -rf direction 或 rm file
• 进入目录：cd file
• 修改/转移文件：dist mv source target
• 拷贝：cp source target
• 完全显示文件内容：cat file
• 显示文件部分内容：head file (前几行) 或 tail file（后几行）
• 查找文件内容：grep key file