开发环境相关面试题

sym001
140 阅读9分钟

本篇介绍开发环境相关的知识点和题目。包括git，调试工具，抓包工具，webpack和babel，以及linux常用命令。熟悉使用开发环境的各个工具，才能证明你真的做过前端开发，真的有项目经验，否则只能认定为菜鸟小白。

一、git工具使用

Git是一种版本控制工具，它使开发人员能够协作开发项目，并跟踪项目的历史记录。以下是Git的基本用法： 安装Git：在你的计算机上安装Git。你可以从Git官方网站上下载安装程序。

1.  创建一个仓库：使用Git来跟踪你的项目。在你的项目文件夹中，运行以下命令：

git init  

这将创建一个空的Git仓库。

2.  添加文件：将你的项目文件添加到Git仓库中。运行以下命令：

git add <file_name>    

这将把文件添加到Git的暂存区。

3.  提交更改：将你的更改提交到Git仓库中。运行以下命令：

git commit -m "commit message"

这将把暂存区中的文件提交到Git仓库中，并添加一条提交消息。

4.  查看状态：查看Git仓库的状态。运行以下命令：

git status

这将显示当前文件的状态，包括哪些文件已经被修改但尚未提交。

5.  查看历史记录：查看Git仓库的历史记录。运行以下命令：

git log

这将显示所有提交的历史记录，包括提交人、提交时间和提交消息。

6.  分支管理：使用Git来管理分支。运行以下命令：

git branch <branch_name>

这将创建一个新的分支。

7.你可以使用以下命令来切换到新分支：

git checkout <branch_name>

8.  同步远程仓库：使用Git来同步本地仓库和远程仓库。运行以下命令：

git remote add <remote_name> <remote_url>

9.  这将添加一个指向远程仓库的链接。你可以使用以下命令来将本地更改推送到远程仓库：

git push <remote_name> <branch_name>

10.  你也可以使用以下命令来从远程仓库拉取更改：

git pull <remote_name> <branch_name>

11.  将远程仓库中的更改拉取到本地仓库中。

12.  解决冲突：在多人协作开发时，可能会发生冲突。使用Git来解决冲突。运行以下命令：

git merge <branch_name>

将指定分支中的更改合并到当前分支中。如果发生冲突，你需要手动解决冲突并提交更改。

二、Web开发Chrome浏览器调试工具有哪些

  1. Elements：查看和编辑网页的HTML和CSS代码。
  2. Console：在浏览器中运行JavaScript代码并调试。
  3. Sources：查看和调试JavaScript源代码，包括断点和调试工具。
  4. Network：查看网页加载的所有资源，包括HTTP请求和响应。
  5. Performance：分析网页性能，包括CPU和内存使用情况。
  6. Application：管理网页的本地存储，包括Cookies、LocalStorage和SessionStorage。
  7. Security：分析网页的安全性，包括HTTPS证书和混合内容。
  8. Audits：分析网页的性能、可访问性、最佳实践和SEO等方面，提供优化建议。
  9. Lighthouse：使用Audits工具创建的自动化工具，对网页的性能、可访问性、最佳实践和SEO等方面进行评估，并提供优化建议。
  10. Device Mode：模拟不同设备的屏幕大小和分辨率，并测试响应式设计。
  11. Remote Debugging：通过USB连接或无线网络远程调试在移动设备上运行的网页。
  12. Console Drawer：在浏览器右侧打开一个小型的控制台窗口，可以快速查看和编辑代码。
  13. Animation：可视化查看CSS动画的帧率和性能。
  14. Coverage：分析JavaScript和CSS代码的覆盖率，以确定未使用的代码。
  15. Memory：分析JavaScript代码的内存使用情况，以优化性能和避免内存泄漏。
  16. Sensors：模拟设备的传感器（如加速度计和GPS），以测试响应式设计和地理位置相关功能。

三、抓包工具有哪些

  1. Fiddler：一款免费的Windows平台的抓包工具，可以捕获HTTP和HTTPS流量，并提供详细的统计信息和调试工具。

  2. Wireshark：一款免费的跨平台网络协议分析工具，可以捕获和分析网络数据包，支持多种协议。

  3. Charles：一款付费的跨平台抓包工具，可以捕获HTTP和HTTPS流量，并提供详细的统计信息和调试工具。

  4. Burp Suite：一款付费的跨平台Web应用程序安全测试工具，可以捕获HTTP和HTTPS流量，并提供强大的攻击和漏洞扫描功能。

  5. mitmproxy：一款免费的跨平台抓包工具，可以捕获HTTP和HTTPS流量，并提供详细的统计信息和调试工具，支持Python脚本扩展。

  6. HTTP Scoop：一款付费的Mac平台抓包工具，可以捕获HTTP和HTTPS流量，并提供详细的统计信息和调试工具。

  7. Tcpdump：一款免费的跨平台命令行工具，可以捕获网络数据包，支持多种协议。

四、webpack配置

Webpack是一个常用的JavaScript模块打包工具。它可以将多个模块打包成单个文件，以便在浏览器中加载。下面是一个简单的Webpack配置示例：

const path = require("path");

module.exports = {
  entry: "./src/index.js", // 入口文件
  output: {
    filename: "bundle.js", // 打包后的文件名
    path: path.resolve(__dirname, "dist"), // 打包后的文件路径
  },
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有.js文件
        exclude: /node_modules/, // 排除node_modules目录
        use: {
          loader: "babel-loader", // 使用babel-loader处理js文件
          options: {
            presets: ["@babel/preset-env"], // 使用babel/preset-env预设
          },
        },
      },
      {
        test: /.css$/, // 匹配所有.css文件
        use: ["style-loader", "css-loader"], // 使用style-loader和css-loader处理css文件
      },
    ],
  },
};

这个配置文件中，我们指定了入口文件为./src/index.js，将打包后的文件命名为bundle.js，并将其输出到./dist目录下。同时，我们使用了两个loader来处理不同类型的文件。对于.js文件，我们使用了babel-loader来处理ES6语法，并将其转换为浏览器可识别的代码。对于.css文件，我们使用了style-loader和css-loader来处理样式文件。

这只是一个简单的Webpack配置示例，实际项目中可能需要更复杂的配置。以下是一些常用的配置选项：

  • entry：指定入口文件，可以是单个文件或多个文件。
  • output：指定输出文件的名称和路径。
  • module：定义各种文件类型的loader，用于处理不同类型的文件。
  • resolve：定义模块解析规则，例如可以指定模块的根路径、别名等。
  • plugins：定义各种插件，用于实现各种功能，例如压缩代码、提取公共代码等。

Webpack的配置非常灵活，可以根据项目需求进行不同的配置。同时，Webpack社区也提供了大量的插件和loader，可以方便地扩展Webpack的功能。

五、babel配置

Babel是一个JavaScript编译器，可以将ES6+的代码转换为向后兼容的代码，以便在旧版浏览器或环境中运行。以下是一个基本的Babel配置示例：

安装Babel依赖：

npm install --save-dev @babel/core @babel/cli @babel/preset-env

  1. 在项目根目录下创建.babelrc文件，并添加以下配置：
{
  "presets": [
    "@babel/preset-env"
  ]
}

该配置使用@babel/preset-env预设，它可以根据您的目标环境自动确定要使用的转换器和插件。如果需要更多的转换和插件，可以在presets数组中添加其他预设或在.babelrc文件中添加plugins数组来自定义转换和插件。

例如，如果您想使用ES6的箭头函数，但是需要将其转换为ES5的函数表达式，可以使用以下配置：

{
  "presets": [
    "@babel/preset-env"
  ],
  "plugins": [
    "@babel/plugin-transform-arrow-functions"
  ]
}
  1. 在package.json文件中添加一个脚本来运行Babel：
"scripts": {
  "build": "babel src -d lib"
}

该脚本将src目录中的所有文件转换为lib目录中的向后兼容代码。以上是一个基本的Babel配置示例，您可以根据需要进行自定义和扩展。

以下是一些常用的Babel插件和预设，您可以根据需要添加到您的项目中： 插件：

  • @babel/plugin-transform-arrow-functions：将ES6的箭头函数转换为ES5的函数表达式。
  • @babel/plugin-transform-classes：将ES6的类转换为ES5的函数和原型的组合。
  • @babel/plugin-transform-object-assign：将ES6的对象分配语法转换为ES5的对象属性分配。
  • @babel/plugin-transform-runtime：将Babel的辅助函数提取到单独的模块中，以减少重复代码。
  • @babel/plugin-proposal-optional-chaining：支持ES2020的可选链式语法。

预设：

  • @babel/preset-env：根据目标环境自动确定需要的转换器和插件。
  • @babel/preset-react：用于转换React的JSX语法。
  • @babel/preset-typescript：用于转换TypeScript代码。

除了以上列出的插件和预设之外，还有很多其他的Babel插件和预设可供选择，您可以根据自己的需要进行选择和添加。

最后，您还可以使用Babel的CLI命令来手动转换代码：

npx babel src --out-dir lib

以上命令将src目录中的所有文件转换为lib目录中的向后兼容代码。

六、linux常用命令

好的，以下是一些常用的Linux命令：

  1. ls：列出当前目录下的文件和文件夹。
  2. cd：更改当前工作目录。
  3. pwd：显示当前工作目录的路径。
  4. mkdir：创建一个新的目录。
  5. rmdir：删除一个空目录。
  6. touch：创建一个新文件或更新现有文件的时间戳。
  7. rm：删除文件或目录。
  8. cp：复制文件或目录。
  9. mv：移动文件或目录。
  10. cat：显示文件的内容。
  11. grep：在文件中搜索指定的字符串。
  12. less：逐页显示文件内容。
  13. head：显示文件的前几行。
  14. tail：显示文件的后几行。
  15. chmod：更改文件或目录的权限。
  16. chown：更改文件或目录的所有者。
  17. ps：显示当前正在运行的进程。
  18. top：显示系统资源使用情况和进程信息。
  19. kill：终止进程。
  20. ping：测试网络连接。
  21. ifconfig：显示网络接口配置信息。
  22. netstat：显示网络连接状态和统计信息。
  23. ssh：通过安全的方式远程登录到另一台计算机。
  24. scp：通过安全的方式将文件从一台计算机复制到另一台计算机。
  25. tar：将多个文件和目录打包成一个文件。
  26. unzip：解压缩zip文件。
  27. curl：从命令行下载文件。
avatar
文章
阅读
粉丝