开发环境学习

1、 git的常见命令

1.git clone https/ssh ||| https需要账号密码验证，ssh需要在仓库配置电脑的公匙
2.git branch / git branch 分支name||| 前者查看分支，后者创建分支
3.git status ||| 获取当前的状态
4.git checkout ./文件name ||| 放弃在git add之前对工作区文件的修改，可以是全部也可以是单个
5.git checkout -b 分支name/git checkout 分支name ||| 前者是创建并切换分支，后者是切换分支
6.git merge 分支name ||| 合并分支，合并代码到当前分支
7.git diff ./文件name ||| 查看所有或者修改的文件的内容
8.git add ./文件name ||| 把内容从工作目录添加到暂存区，可以是全部也可以是单个
9.git commit -m "添加一条记录" ||| 提交暂存区文件到本地仓库中
10.git push origin 分支名 ||| 把本地分支的代码推送到远程仓库中，如果本地分支和远程分支名相同可以直接 git push
11.git pull origin master ||| 拉取最新远程代码并合并,合并分支前，去各个分支拉取最新代码
12.git log ||| 可以查看提交记录
13.git show log里面的id ||| 查看本次提交修改的内容
14.git fetch ||| 从远程仓库拉取下来所有的分支
16.git merge ||| 如果在不是自己的分支写了代码，可以用这个吧修改的地方放在暂存区，然后我们切换回分支，再用git merge pop,从暂存区取出代码加在现在的分支

2、抓包

Windows：fiddler
MacOs：charles
手机，电脑同一局域网，
手机WiFi代理再电脑上

3、webpack和babel

3.1、webpack

webpack推荐教程

1.npm init，初始化npm
2.npm i webpack webpack-cli -D
3.创建一个build文件夹，里面创建三个文件，一个webpack-common.js，一个webpack-dev.js，一个webpack-prod.js。
4.在package.json里面配置build

//webpack-common.js
// 公共配置

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // 入口文件 main.js
  entry: {
    main: './src/main.js'
  },
  // 输出
  output: {
    // 输出到 dist文件夹
    // 记得改路径
    path: path.resolve(__dirname, '../dist'),
    // js文件下
    filename: 'js/chunk-[contenthash].js',
    // 每次打包前自动清除旧的dist
    clean: true,
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择模板 public/index.html
      template: './public/index.html',
      // 打包后的名字
      filename: 'index.html',
      // js文件插入 body里
      inject: 'body',
    })
  ]
}

//webpack-dev.js
// 开发环境

const { merge } = require('webpack-merge')
const base = require('./webpack.common')
const path = require('path')

module.exports = merge(base, {
  mode: 'development',
  devServer: {
    port:3000,
    static: path.join(__dirname, './public'),
    compress: true,
    open: true,
  }
})

//webpack-prod.js
// 生产环境

const { merge } = require('webpack-merge')
const base = require('./webpack.common')

module.exports = merge(base, {
  mode: 'production'
})

{
  "name": "ls",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config ./build/webpack.prod",
    "serve": "webpack-dev-server --config ./build/webpack.dev"
  },
  "repository": {
    "type": "git",
    "url": "git@e.coding.net:potkiss/git-test/gittest.git"
  },
  "author": "potkiss",
  "license": "ISC",
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.2",
    "webpack-merge": "^5.8.0"
  }
}

3.2、babel

1.下载所需要的依赖

@babel/core babel-loader
@babel/preset-env
@babel/plugin-transform-runtime
-D

2.webpack.common.js里面配置rules

  module: {
    rules: [
      // 刚刚的代码...
      {
        // 匹配js后缀文件
        test: /\.js$/,
        // 排除node_modules中的js
        exclude: /node_modules/,
        use: [
          'babel-loader'
        ],
      }
    ]
  }

3.创建babel的规则文件

// babel.config.js

module.exports = {
  presets: [
    // 配置规则
    "@babel/preset-env"
  ],
  // 配置插件
  plugins: ["@babel/plugin-transform-runtime"]
}

4、linux常见的命令

cd 进入文件夹
ls 展示文件夹里面的内容
mkdir 创建文件夹
touch 创建文件
clear 清空终端
rm xx.js 删除文件
rmdir xx 删除文件夹
rm -rf xx.js/xx 强制删除文件或者文件夹
mv a.js b.js 吧a.js文件名字改为b.js
mv a.js ../xx 把a.js移动到xx文件夹
cp a.js a1.js 拷贝a.js为a1.js
ssh aa@192.168.1.1 以用户名aa登陆服务器
vim a.js 新建一个a.js并且打开，先点击i进入编辑模式，修改完后点击esc，然后输入:，再输入wq!保存并退出
cat a.js 查看a.js的内容
head a.js 查看a.js的前面几行
tail a.js 查看a.js的最后几行
grep "hello" a.js 查找a.js里面的hello关键字的地方
vimtutor 官方提供的命令学习手册

5、ES6的模块化

//index.js
import {add,a} from './module.js' //用export 导出的可以用解构赋值
import b from './module.js'  //用export default导出的只能用这种
console.log(add(2,4))
console.log(a)
console.log(b.b)

//module.js
export function add(a,b){
    return a+b
}
const a = 100
const b = {
    k:100
}
export{
    a
}
export default {
    b
}