- git
- 调试工具
- 抓包
- webpack babel
- linux 常用命令(测试机)
git
最常用的代码版本管理工具
大型项目需要多人协作开发,必须熟用嗷~
git服务端常见的有 github、coding.net等
-
git init
这个命令用来初始化一个Git仓库。一般在新项目开始的时候执行。 -
git clone
从远程仓库复制一个已有的Git仓库到本地。大多数情况下,我们会从远程仓库如GitHub、GitLab等拉取代码。
git clone <repository_url> -
git status
查看当前工作目录的状态,它会告诉你哪些文件被修改了,哪些文件准备提交。 -
git add
把文件添加到暂存区,准备提交。你可以使用文件名、文件夹名,甚至用通配符来选择你要提交的文件。
git add <file_name>
git add . # 添加当前目录下所有文件 -
git commit
将暂存区的文件提交到本地仓库,并记录一条提交信息。你应该确保每次提交都附带一个清晰的描述信息,以便日后追踪。
git commit -m "提交信息" -
git push
将本地的提交推送到远程仓库。这个命令是团队协作中的关键,它将你本地的工作同步到远程服务器上。
git push origin <branch_name> -
git pull
从远程仓库拉取最新的代码并合并到当前分支。团队开发中,你需要经常拉取团队其他人的更新。
git pull origin <branch_name> -
git branch
查看分支列表,创建或删除分支。在开发中,我们常常需要在不同的分支中处理不同的功能或问题。
git branch # 查看本地分支
git branch <branch_name> # 创建新分支
git branch -d <branch_name> # 删除分支 -
git checkout
切换到指定的分支或提交。如果你需要切换到某个分支进行开发,可以用这个命令。
git checkout <branch_name> # 切换分支
git checkout -b <new_branch> # 创建并切换到新分支 -
git merge
将另外一个分支的修改合并到当前分支。这是我们经常用来合并新功能或者修复Bug的命令。
git merge <branch_name> -
git log
查看提交历史。这个命令可以帮你追踪代码改动,特别是在大型项目中,知道谁做了哪些改动非常有用。
git log -
git reset
撤销某些提交或修改。你可以用这个命令来重置暂存区或者工作目录的状态,非常适合用来回滚错误的修改。
git reset --hard <commit_id>
抓包
webpack
- 初始化webpack-demo文件夹,初始化:
npm init -y
生成package.json
文件 - 创建
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 是否对代码进行优化(如压缩、混淆等)。
- 创建 src 目录和 index.js 文件
- 运行 Webpack
在 package.json 文件中添加一个脚本来运行 Webpack。打开 package.json,并找到 scripts 部分,添加以下内容:
"scripts": {
"build": "webpack"
}
然后在终端运行: npm run build
这时,Webpack 将根据配置打包你的项目,并在 dist 文件夹中生成 bundle.js 文件。
- 新增一个 index.html 文件
- 安装插件
npm i html-webpack-plugin -D
用于解析html
npm i webpack-dev-server
启动服务