首页 > 其他分享 >面试-JS Web API-开发环境

面试-JS Web API-开发环境

时间:2024-09-13 14:15:22浏览次数:10  
标签:Web git 文件 JS webpack API 提交 js 分支

  • git
  • 调试工具
  • 抓包
  • webpack babel
  • linux 常用命令(测试机)

git
最常用的代码版本管理工具
大型项目需要多人协作开发,必须熟用嗷~
git服务端常见的有 github、coding.net等

  1. git init
    这个命令用来初始化一个Git仓库。一般在新项目开始的时候执行。

  2. git clone
    从远程仓库复制一个已有的Git仓库到本地。大多数情况下,我们会从远程仓库如GitHub、GitLab等拉取代码。
    git clone <repository_url>

  3. git status
    查看当前工作目录的状态,它会告诉你哪些文件被修改了,哪些文件准备提交。

  4. git add
    把文件添加到暂存区,准备提交。你可以使用文件名、文件夹名,甚至用通配符来选择你要提交的文件。
    git add <file_name>
    git add . # 添加当前目录下所有文件

  5. git commit
    将暂存区的文件提交到本地仓库,并记录一条提交信息。你应该确保每次提交都附带一个清晰的描述信息,以便日后追踪。
    git commit -m "提交信息"

  6. git push
    将本地的提交推送到远程仓库。这个命令是团队协作中的关键,它将你本地的工作同步到远程服务器上。
    git push origin <branch_name>

  7. git pull
    从远程仓库拉取最新的代码并合并到当前分支。团队开发中,你需要经常拉取团队其他人的更新。
    git pull origin <branch_name>

  8. git branch
    查看分支列表,创建或删除分支。在开发中,我们常常需要在不同的分支中处理不同的功能或问题。
    git branch # 查看本地分支
    git branch <branch_name> # 创建新分支
    git branch -d <branch_name> # 删除分支

  9. git checkout
    切换到指定的分支或提交。如果你需要切换到某个分支进行开发,可以用这个命令。
    git checkout <branch_name> # 切换分支
    git checkout -b <new_branch> # 创建并切换到新分支

  10. git merge
    将另外一个分支的修改合并到当前分支。这是我们经常用来合并新功能或者修复Bug的命令。
    git merge <branch_name>

  11. git log
    查看提交历史。这个命令可以帮你追踪代码改动,特别是在大型项目中,知道谁做了哪些改动非常有用。
    git log

  12. git reset
    撤销某些提交或修改。你可以用这个命令来重置暂存区或者工作目录的状态,非常适合用来回滚错误的修改。
    git reset --hard <commit_id>

抓包

webpack

  1. 初始化webpack-demo文件夹,初始化: npm init -y生成package.json文件
  2. 创建webpack.config.js文件:
const path = require("path");

module.exports = {
  //开发模式代码不会被压缩,production模式会进行代码优化
  mode: "development",
  entry: path.join(__dirname, "src", "index.js"), //从这个文件开始打包 __dirname 当前目录
  output: {
    filename: "bundle.js", //打包后生成的文件名
    path: path.join(__dirname, "dist"),
  },
};

entry: 这是 Webpack 的入口点,你的应用程序将从这个文件开始打包。通常我们将入口文件放在 src 文件夹下。
output: 配置打包后的输出文件。path.resolve(__dirname, 'dist') 会生成绝对路径,bundle.js 是打包生成的文件名,dist 是存放打包文件的文件夹。
mode: 开发模式(development)或生产模式(production),它决定了 Webpack 是否对代码进行优化(如压缩、混淆等)。

  1. 创建 src 目录和 index.js 文件
  2. 运行 Webpack
    在 package.json 文件中添加一个脚本来运行 Webpack。打开 package.json,并找到 scripts 部分,添加以下内容:
"scripts": {
  "build": "webpack"
}

然后在终端运行: npm run build
这时,Webpack 将根据配置打包你的项目,并在 dist 文件夹中生成 bundle.js 文件。

  1. 新增一个 index.html 文件
  2. 安装插件 npm i html-webpack-plugin -D 用于解析html
    npm i webpack-dev-server 启动服务

标签:Web,git,文件,JS,webpack,API,提交,js,分支
From: https://www.cnblogs.com/gardenOfCicy/p/18411679

相关文章

  • 消除干扰:如何在PyCharm中轻松设置Chrome无痕模式进行Web测试(WebStorm无痕模式打开HTML
    文章目录......
  • 基于Node.js+vue机房管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着信息技术的飞速发展,计算机机房已成为高校、培训机构及企业不可或缺的重要设施。然而,传统机房管理方式往往依赖于人工记录与监控,存在效率低下、易出错、......
  • 基于Node.js+vue直面BOSS招聘管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在当今竞争激烈的就业市场中,招聘与求职双方均面临着信息不对称、沟通效率低下的挑战。传统招聘方式往往依赖于线下招聘会、招聘网站的海量信息筛选,以及繁琐......
  • 基于Node.js+vue基于SpringBoot的儿童福利院管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着社会对儿童福利事业关注度的不断提升,儿童福利院作为保障孤儿、弃婴及困境儿童基本生活权益的重要机构,其管理效率与服务质量直接关系到儿童的健康成长。......
  • 基于Node.js+vue基于SpringBoot动漫电影网站(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网技术的飞速发展,网络娱乐已成为人们日常生活中不可或缺的一部分,尤其是动漫电影作为一种集艺术性、娱乐性和文化性于一体的媒介形式,受到了广泛的欢......
  • CSS 响应式设计(补充)——WEB开发系列36
    随着移动设备的普及,网页设计的焦点逐渐转向了响应式设计。响应式设计不仅要求网页在各种屏幕尺寸上良好展示,还要适应不同设备的特性。1.响应式设计之前的灵活布局在响应式设计流行之前,网页布局通常是固定的或流动的。固定布局使用固定的像素宽度,而流动布局使用相对单位(如百分比)来......
  • 直播美颜SDK与主播美颜API的深度集成与优化策略详解
    本篇文章将深入探讨如何实现直播美颜SDK与主播美颜API的深度集成,并给出优化策略,帮助开发者构建高效的美颜工具。 一、直播美颜SDK与主播美颜API的基本概念1.直播美颜SDK直播美颜SDK是一套专门为视频流媒体应用提供实时美颜效果的开发工具包,旨在通过人脸识别、磨皮、美白、瘦脸等算......
  • 从MySQL JSON字段中提取去重城市列表的SQL查询
    重点:数据库有一个城市字段,是一个json数组(["北京市","上海市","广州市"]),每条数据的城市可能重合,通过下面SQL可返回去重后的城市列表,mysql版本要5.7以上才支持。SQL如下:SELECTDISTINCTTRIM(JSON_UNQUOTE(JSON_EXTRACT(城市json字段名,CONCAT('$[',n.n,']'))))AScityF......
  • YAML 与 JSON、XML 比较及 YAML 使用最佳实践
    YAML(YAMLAin'tMarkupLanguage的递归缩写)是一种人类可读的数据序列化格式,通常用于配置文件、数据交换和设置管理。它简洁且易于读写,尤其适合在编程语言之间传递配置数据。以下是一些YAML的基本概念和语法示例:基本语法键值对:name:JohnDoeage:30嵌套:person:name:JohnDoe......
  • 批量获取抖音直播间弹幕数据api:实时弹幕评论数据
    抖音作为当下最热门的短视频平台之一,拥有庞大的用户群体和活跃度,为电商行业带来了巨大的商业机会。抖音商品详情接口作为连接抖音平台和电商系统的关键纽带,具有重要的作用。本文将深入探讨抖音商品详情接口在电商行业中的重要性,并介绍如何通过代码实现实时数据获取,帮助电商企业更好......