前端面试准备-开发环境

49 阅读3分钟

一、常用git命令

1. git add . // 添加所有文件到暂存区
2. git commit -m "xxx" // 提交 并注释说明xxx
3. git push origin master // 推送本地master分支 到远端master分支上
4. git pull origin master // 拉取远端master最新代码到本地
5. git branch // 查看本地所有分支
6. git checkout branchname // 切换分支到branchname
7. git checkout -b branchname // 创建新分支 并切换到该分支上
8. git merge origin/master // 合并远端master分支 到当前分支
9. git log // 查看提交记录
10. git checkout filename // 在commit前,撤销该文件的所有修改
11. git fetch // 拉取远端所有分支到本地
12. git stash // 把当前的代码隐藏起来 使所处的分支变的“干净”
13. git stash pop // (切换到新分支后)恢复之前隐藏的代码

二、chrome调试工具

  1. Elements
  2. Console
  3. Network 查看资源加载
  4. Application 查看localStorage sessionStorage Cookie等
  5. Source 代码中debugger打断点 结合控制面板中的source调试bug

三、webpack和babel

webpack基础配置

  1. 下载 npm i webpack webpack-cli -D
  2. 新建配置文件 webpack.config.js
const path = require('path');
module.exports = {
  // 模式
  mode: 'development', // development - 开发模式;production - 生产模式
  // 文件入口
  entry: path.join(__dirname, 'src', 'index.js'), // __dirname当前目录
  // 输出路径
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist')
  }
}
  1. package.json文件添加脚本,运行webpack npm run build
{
  "name": "study",
  "version": "1.0.0",
  ...
  "scripts": {
    ...
    "build": "webpack"
  },
  ...
  "devDependencies": {
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1"
  }
}

  1. 生成dist文件夹,文件夹下是一个未压缩过的bundle.js(注:上面mode设置的是开发模式,所以不会进行压缩 -> 方便调试)
  2. 安装plugin
npm i html-webpack-plugin -D // 解析html
npm i webpack-dev-server -D // 开启服务
  1. 修改webpack.config.js,添加plugins
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  ...
  // 插件 - 增加webpack功能
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), // 模板路径
      filename: 'index.html' // 经过模板编译后 生成的文件名
    })
  ],
  // 启动服务
  devServer: {
    port: 3000, // 本地端口3000
    // webpack-dev-server version>=4.0.0 contnentBase属性被static中的directory属性代替
    static: {
      directory: path.join(__dirname, 'dist') // 当前目录
    }
  }
}
  1. package.json添加脚本,执行npm run dev开启服务
{
  "name": "study",
  "version": "1.0.0",
  ...
  "scripts": {
    ...
    "build": "webpack",
    "dev": "webpack-dev-server"
  },
  ...
  "devDependencies": {
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}

babel结合webpack使用

“高级”语法 -> “低级”语法,ES6 -> ES5

  1. 下载babel相关包
npm i @babel/core @babel/preset-env babel-loader -D
  1. 添加babel配置文件 .babelrc
// .babelrc是个json格式的文件
{
  "presets": ["@babel/preset-env"] // 是个有关babel配置的集合
}
  1. webpack.config.js中的配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  ...
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/, // 正则表达式 匹配所有.js结尾的模块
        use: ['babel-loader'], // 使用babel-loader编译
        include: path.join(__dirname, 'src'), // src文件下的
        exclude: /node_modules/, // 除去node_modules下的
      }
    ]
  },
  ...
}
  1. 执行 npm run dev

生产环境下webpack打包

  1. 新建webpack.prod.js文件 mode开启生产模式,删除dvServer相关配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 模式
  mode: 'production', // development - 开发模式;production - 生产模式
  // 文件入口
  entry: path.join(__dirname, 'src', 'index.js'), // __dirname当前目录
  // 输出路径
  output: {
    filename: 'bundle.[contenthash].js', // 文件如果有改动的话 contenthash会改变
    path: path.join(__dirname, 'dist')
  },
  // 模块
  module: {
    rules: [
      {
        test: /\.js$/, // 正则表达式 匹配所有.js结尾的模块
        use: ['babel-loader'], // 使用babel-loader编译
        include: path.join(__dirname, 'src'), // src文件下的
        exclude: /node_modules/, // 除去node_modules下的
      }
    ]
  },
  // 插件 - 增加webpack功能
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'src', 'index.html'), // 模板路径
      filename: 'index.html' // 经过模板编译后 生成的文件名
    })
  ]
}
  1. 修改package.json中的脚本 运行build时,执行webpack.prod.js
{
  "name": "study",
  "version": "1.0.0",
  ...
  "scripts": {
    ...
    "build": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server"
  },
  ...
  "devDependencies": {
    "@babel/core": "^7.21.4",
    "@babel/preset-env": "^7.21.4",
    "babel-loader": "^9.1.2",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.78.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.13.2"
  }
}
  1. 执行build,生成的dist文件夹下的bundle.[hash].js是经过压缩的

四、linux常用命令

1. ls // 查看当前文件夹下的文件
2. ls -a // 查看所有文件
3. ll // 查看所有文件(列表形式展示)
4. mkdir filename // 创建该文件夹
5. rm -rf filename // 删除该文件夹 -rf即文件夹下所有文件一并删除
6. cd 路径 // 定位
7. mv oldname newname // 修改文件名
8. mv filename 路径 // 移动文件
9. cp filename newfile // 拷贝文件
10. touch newfile // 新建
11. vi newfile // 新建 会进入到编辑模式 i开始写入 esc退出写入 :wq保存退出
12. vim filename // 查看文件内容(没有该文件会先创建,再进入到编辑)
13. cat filename // 查看文件内容
14. head filename // 查看文件前面几行
15. tail filename // 查看文件后面几行
16. grep keyword filename // 查找文件中的包含关键字keyword的内容