知识点

git

最常用的代码版本管理工具大型项目需要多人协作开发，必需熟用git MacOS自带git命令，windows可以去官网下载安装 git服务端常见的有github coding.net等大公司会搭建自己的内网git服务

git常用命令

git add . 增加
git checkout xxx 还原
git status查看哪些文件处于什么状态
git diff比较文件在暂存区和工作区的差异
git commit -m 'xxx' 提交
git push orgin master 推送
git pull orgin master 拉取
git branch 分支
git checkout -b xxx /git checkout xxx 切换分支/恢复撤回修改内容
git merge xxx 合并分支
git fetch 拉取全部分支
git log 查看提交记录
git show xxx(xxx为log中的唯一id)查看某次历史提交信息的完整信息
git stash修改暂存
git stash pop推出暂存修改
git rebase变基
git revert远程撤销
git reset本地撤销
教程
教学

调试工具

chrome调试工具

一般不会面试时考察，但这是前端工程师毕备的技能(不算知识)

Elements
Console
debugger
Network
Application

抓包

移动端H5页，查看网络请求，需要用工具抓包 windows 一般用fiddler MacOS一般用charles

webpack babel

webpack

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

开发环境

//先创建npm项目
//控制台
npm init 
npm install webpack webpac-cli -D 
//根目录新建webpack.config.js src文件夹
const path = require('path')
module.exports = {
  mode: 'development',
  entry:path.join(__dirname, 'src','index.js'),
  output:{
    filename:'bundle.js',
    path:path.join(__dirname,'dist')
  },
  // package.json
  "scripts": {
   //自带 "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    
  },
//然后执行npm run build 打包
//控制台
npm install html -webpack-pluagin
npm install webpack-dev-server -D 
//webpack.config.js中加入
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
      template:path.join(__dirname,'src','index.html'),
      filename:'index.html'
    })
  ],
   devServer:{
    port:3000, //启动的端口
    contentBase: path.join(__dirname,'dist')
  }
  // package.json
   "scripts": {
   //自带 "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server" //新增
  },

生产环境

/*在项目跟目录创建webpack.prod.js
将webpack.config.js文件拷贝到webpack.prod.js中*/
//将mode:mode: 'development',改成production
module.exports = {
  mode: 'production', //改变
}
//删除devserver
//更改filename，添加哈希值，定义唯一名称
module.exports = {
  output:{
    filename:'bundle.[contenthash].js', //更改
    path:path.join(__dirname,'dist')
  },
}
//改变package.json里的build
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config webpack.prod.js", //改动
    "dev": "webpack-dev-server"
  },
// 执行npm run build 打包

babel

//安装
npm i @babel/core @babel/preset-env babel-loader -D
//跟目录新建.babelrc
{
  "presets":["@babel/preset-env"]
}

//weback-config.js中
module.exports = {
  module:{
    rules:[
      {
        test:/\.js$/,
        use:'babel-loader',
        include:path.join(__dirname,'src'),
        exclude:/node_modules/
      }
    ]
  },
}

ES6模块化

//导出
//1
export function fn(){
...
}
export const name = '...'
export const obj = {
    ...
}
//2
function fn(){
...
}
const name = '...'
const obj = {
    ...
}
export {
    fn,
    name,
    obj
}
//导入
import {fn,name,obj} from '组件的相对路径'

//导出
//1
export defalut {
    name:xxx
}
//2
const obj = {
    name:xxx
}
export defalut obj
//导入
inport obj from '组件相对路径'

//导出
function fn(){
...
}
const name = '...'
const obj = {
    ...
}
export default{
    fn,
    name,
    obj
}
// 导入
import e from './b'
e.fn()
console.log(e.name)
console.log(e.obj)

linux 常用命令

*以下命令均基于macOS
ssh work@192.168.xxx.xxx //登录服务器
ls查看文件(平铺)
ls -a 查看隐藏文件
ll 查看文件(列表)
clear 清屏
mkdir xxx 创建文件夹
rm -rf xxx 删除文件夹 -代表参数 -r递归删除(全部删除)-f强制删除
cd xxx 定位到目录
mv aaa aab 更改名称 aaa代表原始名称 aab代表要改成的名称
mv xxx ../xxx 移动文件 xxx代表文件名，../代表上一级目录输入文件名时用使用头字母加tab可以快速填充
cp x.js x1.js 拷贝第一项源文件，第二项新文件
touch x.js 新建文件
vi x.js 如果没有就新建并打开如果有就打开
cat x.js 打印出全部文件内容
head x.js 打印文件前几行
tail x.js 打印后几行
grep 'xxx' x.js 查找文件中的关键字 xxx关键字 x.js 要查找的文件

vim编辑器

i 编辑
esc键退出编辑
: w 写入
: q 退出
: q!强制退出放弃写入前的所有修改
：wq 写入并退出

前端笔记(开发环境)

知识点

git

git常用命令

调试工具

chrome调试工具

抓包

webpack babel

webpack

开发环境

生产环境

babel

ES6模块化

linux 常用命令

vim编辑器