前端面试准备-开发环境一、常用git命令二、chrome调试工具三、webpack和babel 四、linux常用命

一、常用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调试工具

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

三、webpack和babel

webpack基础配置

下载 npm i webpack webpack-cli -D
新建配置文件 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')
  }
}

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"
  }
}

生成dist文件夹，文件夹下是一个未压缩过的bundle.js(注：上面mode设置的是开发模式，所以不会进行压缩 -> 方便调试)
安装plugin

npm i html-webpack-plugin -D // 解析html
npm i webpack-dev-server -D // 开启服务

修改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') // 当前目录
    }
  }
}

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

下载babel相关包

npm i @babel/core @babel/preset-env babel-loader -D

添加babel配置文件 .babelrc

// .babelrc是个json格式的文件
{
  "presets": ["@babel/preset-env"] // 是个有关babel配置的集合
}

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下的
      }
    ]
  },
  ...
}

执行 npm run dev

生产环境下webpack打包

新建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' // 经过模板编译后 生成的文件名
    })
  ]
}

修改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"
  }
}

执行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的内容