前端开发环境的一些常用记录


Git

以下是Git常用的命令:
  1. 初始化一个仓库:git init

    查看分支:git branch

    将已修改或未跟踪的文件添加到暂存区:git add [file] 或 git add .

    提交至本地仓库:git commit -m “提及记录xxxx”

    本地分支推送至远程分支:git push origin …

    查看当前工作目录和暂存区的状态: git status

    查看提交的日志记录: git log

    从远程分支拉取代码:git pull origin …

    合并某分支(xxx)到当前分支: git merge xxx

    切换到分支xxx(分支名字):git checkout xxx

    文件行为撤销一次(文件名字):git checkout xxx

    创建分支xxx并切换到该分支:git checkout -b xxx

    删除分支xxx:git branch -d xxx

    将当前分支到改动保存到堆栈中:git stash

    恢复堆栈中缓存的改动内容:git stash pop

    查看某次提交的内容:git show xxx

使用Git命令行解决冲突
1.  明确合并时哪些文件发生冲突 (当前分支为dev1)

-
执行命令:git merge 分支名 有冲突时会提示哪些文件有冲突
- 代码冲突:会停留在MERGING状态
前端开发环境的一些常用记录
image.png
2. 查看不同分支代码的差异化

-
执行命令:cat 冲突文件

前端开发环境的一些常用记录 前端开发环境的一些常用记录

3. 修改冲突文件(合并代码)

-
执行命令:vim 冲突文件
前端开发环境的一些常用记录
image.png
通过vim编辑器,删除冲突文件中不需的内容后:
前端开发环境的一些常用记录
image.png
4. 提交修改后的冲突文件

-
执行命令:git add 修改后的冲突文件 先添加到暂存区
- 执行命令:git commit -m '消息' 再提交到本地Git

前端开发环境的一些常用记录
image.png
**5. 推送到Git远程仓库**

-
执行命令:git push
前端开发环境的一些常用记录
image.png

webpack和babel

前端代码为什么要进行构建和打包?

在开发后完成的这个合并的过程就是打包,可以减少了http请求数量,让我们的页面加载和显示更快。

Babel和webpack的区别?

babel[1]是一个JS编译器,用来将ES6/ES7等语法转换为ES5语法(浏览器不认识的语法编译成浏览器认识的语法),从而能够使代码在大部分浏览器中运行。但是babel转换语法时有一些新的api是不转化的,比如promise、Object.assign等,所以babel还提供了很多插件,如babel-polyfill。

webpack[2]是一个打包工具,打包js、css、图片、html等,它可以分析整个项目的文件结构,确认文件之间的依赖,将文件合成、压缩、加入hash等,生成最终项目文件。webpack把所有文件当成模块,但是webpack内置默认的加载器是处理js的,如果要处理其他类型的文件则需要引入不同的loader加载器,用来转化其他文件进行编译打包。webpack通过使用babel-loader使用Babel。

总结:

webpack和babel通常配合起来使用

babel是js编译工具,能将es6或者一些特殊语法做一些转换,只做文件转义,不做文件整合。

webpack是一个打包工具,内置只能处理js,但是它可以加载很多的loader处理css,img,ts,vue等其他文件,最终输出js文件。

webpack通过使用babel-loader使用Babel

webpack如何实现懒加载?

使用import()结合异步组件和异步路由

webpack的热更新原理?

Webpack的热更新又称热替换(Hot Module Replacement),缩写为HMR。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

webpack打包过程
  • 解析入口文件,生成AST树,遍历所有依赖项,收集依赖;
  • 递归解析所有的依赖项,生成依赖关系图;
  • 使用依赖关系图,生成一个可以在浏览器运行的JS文件;
  • 输出到指定文件夹下;
loader和plugin的区别?

在运行时机上,loader 运行在打包文件之前plugin则是在整个编译周期都起作用。

loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中;

plugin扩展了更多的功能;赋予了webpack各种灵活的功能,例如打包优化、资源管理、环境变量注入等,目的是解决 loader无法实现的其他事。

linux命令

常用的Linux命令:
  1. ls:列出当前目录下的文件和文件夹。
  2. cd:进入指定目录。
  3. pwd:显示当前所在的目录。
  4. mkdir:创建一个新的目录。
  5. rm:删除文件或目录。
  6. cp:将文件或目录复制到另一个位置。
  7. mv:将文件或目录移动到另一个位置。
  8. cat:查看文件的内容。
  9. nano:在命令行中编辑文件。
  10. touch:创建一个新的空文件。
  11. chmod:修改文件或目录的权限。
  12. chown:修改文件或目录的所有者。
  13. ps:列出当前正在运行的进程。
  14. kill:终止正在运行的进程。
  15. top:显示当前系统资源的使用情况。


参考资料

[1]

https://links.jianshu.com/go?to=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2F: https://links.jianshu.com/go?to=https%3A%2F%2Fbabeljs.io%2Fdocs%2Fen%2F

[2]

https://links.jianshu.com/go?to=https%3A%2F%2Fwww.webpackjs.com%2Fconcepts%2F: https://links.jianshu.com/go?to=https%3A%2F%2Fwww.webpackjs.com%2Fconcepts%2F


原文始发于微信公众号(消失的程序员):前端开发环境的一些常用记录

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/250641.html

(0)
小半的头像小半

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!