前端工程师常见面试题（前端进阶）前端工程化

　　Babel的原理是什么？
　　参考回答：
　　babel的转译过程也分为三个阶段，这三步具体是：
　　o解析Parse：将代码解析生成抽象语法树（即AST），即词法分析与语法分析的过程
　　o转换Transform：对于AST进行变换一系列的操作，babel接受得到AST并通过babeltraverse对其进行遍历，在此过程中进行添加、更新及移除等操作
　　o生成Generate：将变换后的AST再转换为JS代码，使用到的模块是babelgenerator
　　如何写一个babel插件？
　　参考回答：
　　Babel解析成AST，然后插件更改AST，最后由Babel输出代码
　　那么Babel的插件模块需要你暴露一个function，function内返回visitormodule。exportfunction（babel）｛return｛visitor：｛｝｝｝
　　visitor是对各类型的AST节点做处理的地方，那么我们怎么知道Babel生成了的AST有哪些节点呢？
　　很简单，你可以把Babel转换的结果打印出来，或者这里有传送门：ASTexplorer
　　这里我们看到constresult12中的11是一个BinaryExpression节点，那么在visitor中，我们就处理这个节点varbabelrequire（babelcore）；vartrequire（babeltypes）；constvisitor｛BinaryExpression（path）｛constnodepath。node；letresult；判断表达式两边，是否都是数字if（t。isNumericLiteral（node。left）t。isNumericLiteral（node。right））｛根据不同的操作符作运算switch（node。operator）｛case：resultnode。left。valuenode。right。value；breakcase：resultnode。left。valuenode。right。value；break；case：resultnode。left。valuenode。right。value；break；case：resultnode。left。valuenode。right。value；break；case：letinode。right。value；while（i）｛resultresultnode。left。value；resultresultnode。left。value；｝break；default：｝｝如果上面的运算有结果的话if（result！undefined）｛把表达式节点替换成number字面量path。replaceWith（t。numericLiteral（result））；｝｝｝；module。exportsfunction（babel）｛return｛visitor｝；｝
　　插件写好了，我们运行下插件试试constbabelrequire（babelcore）；constresultbabel。transform（constresult12；，｛plugins：〔require（。index）〕｝）；console。log（result。code）；constresult3；
　　与预期一致，那么转换constresult12345；呢？
　　结果是：constresult3345；
　　这就奇怪了，为什么只计算了12之后，就没有继续往下运算了？
　　我们看一下这个表达式的AST树
　　你会发现Babel解析成表达式里面再嵌套表达式。
　　表达式（表达式（表达式（表达式（12）3）4）5）
　　而我们的判断条件并不符合所有的，只符合12
　　判断表达式两边，是否都是数字
　　if（t。isNumericLiteral（node。left）t。isNumericLiteral（node。right））｛｝
　　那么我们得改一改
　　第一次计算12之后，我们会得到这样的表达式
　　表达式（表达式（表达式（33）4）5）
　　其中33又符合了我们的条件，我们通过向上递归的方式遍历父级节点
　　又转换成这样：
　　表达式（表达式（64）5）
　　表达式（105）
　　15hr如果上面的运算有结果的话
　　if（result！undefined）｛
　　把表达式节点替换成number字面量
　　path。replaceWith（t。numericLiteral（result））；
　　letparentPathpath。parentPath；
　　向上遍历父级节点
　　parentPathvisitor。BinaryExpression。call（this，parentPath）；
　　｝
　　到这里，我们就得出了结果constresult15；
　　那么其他运算呢：
　　constresult1001050constresult60；
　　constresult（1002）50constresult100；
　　constresult（（（1002）502）50）2constresult9；你的git工作流是怎样的？
　　参考回答：
　　GitFlow是由VincentDriessen提出的一个git操作流程标准。包含如下几个关键分支：master主分支develop主开发分支，包含确定即将发布的代码
　　feature新功能分支，一般一个新功能对应一个分支，对于功能的拆分需要比较合理，以避免一些后面不必要的代码冲突
　　release发布分支，发布时候用的分支，一般测试时候发现的
　　bug在这个分支进行修复hotfixhotfix分支，紧急修bug的时候用
　　GitFlow的优势有如下几点：
　　并行开发：GitFlow可以很方便的实现并行开发：每个新功能都会建立一个新
　　的feature分支，从而和已经完成的功能隔离开来，而且只有在新功能完成开发的情况下，其对应的feature分支才会合并到主开发分支上（也就是我们经常说的develop分支）。另外，如果你正在开发某个功能，同时又有一个新的功能需要开发，你只需要提交当前feature的代码，然后创建另外一个feature分支并完成新功能开发。然后再切回之前的feature分支即可继续完成之前功能的开发。
　　协作开发：GitFlow还支持多人协同开发，因为每个feature分支上改动的代码
　　都只是为了让某个新的feature可以独立运行。同时我们也很容易知道每个人都在干啥。
　　发布阶段：当一个新feature开发完成的时候，它会被合并到develop分支，这
　　个分支主要用来暂时保存那些还没有发布的内容，所以如果需要再开发新的feature，我们只需要从develop分支创建新分支，即可包含所有已经完成的feature。
　　支持紧急修复：GitFlow还包含了hotfix分支。这种类型的分支是从某个已经发
　　布的tag上创建出来并做一个紧急的修复，而且这个紧急修复只影响这个已经
　　发布的tag，而不会影响到你正在开发的新feature。
　　然后就是GitFlow最经典的几张流程图，一定要理解：
　　feature分支都是从develop分支创建，完成后再合并到develop分支上，等待发布。
　　当需要发布时，我们从develop分支创建一个release分支
　　然后这个release分支会发布到测试环境进行测试，如果发现问题就在这个分支直接进行修复。在所有问题修复之前，我们会不停的重复发布测试修复重新发布重新测试这个流程。
　　发布结束后，这个release分支会合并到develop和master分支，从而保证不会有代码丢失。
　　master分支只跟踪已经发布的代码，合并到master上的commit只能来自release分支和hotfix分支。
　　hotfix分支的作用是紧急修复一些Bug。
　　它们都是从master分支上的某个tag建立，修复结束后再合并到develop和master分支上。rebase与merge的区别？
　　参考回答：
　　gitrebase和gitmerge一样都是用于从一个分支获取并且合并到当前分支。
　　假设一个场景，就是我们开发的〔featuretodo〕分支要合并到master主分支，那么用rebase或者merge有什么不同呢？
　　omarge特点：自动创建一个新的commit如果合并的时候遇到冲突，仅需要修改后重新commit
　　o优点：记录了真实的commit情况，包括每个分支的详情
　　o缺点：因为每次merge会自动产生一个mergecommit，所以在使用一些git的GUItools，特别是commit比较频繁时，看到分支很杂乱。
　　orebase特点：会合并之前的commit历史
　　o优点：得到更简洁的项目历史，去掉了mergecommit
　　o缺点：如果合并出现代码问题不容易定位，因为rewrite了history
　　因此，当需要保留详细的合并信息的时候建议使用gitmerge，特别是需要将分支合并进入master分支时；当发现自己修改某个功能时，频繁进行了gitcommit提交时，发现其实过多的提交信息没有必要时，可以尝试gitrebase。gitreset、gitrevert和gitcheckout有什么区别
　　参考回答：
　　这个问题同样也需要先了解git仓库的三个组成部分：工作区（WorkingDirectory）、暂存区（Stage）和历史记录区（History）。
　　o工作区：在git管理下的正常目录都算是工作区，我们平时的编辑工作都是在工作区完成
　　o暂存区：临时区域。里面存放将要提交文件的快照
　　o历史记录区：gitcommit后的记录区
　　三个区的转换关系以及转换所使用的命令：
　　gitreset、gitrevert和gitcheckout的共同点：用来撤销代码仓库中的某些更改。然后是不同点：
　　首先，从commit层面来说：
　　ogitreset可以将一个分支的末端指向之前的一个commit。然后再下次git执行垃圾回收的时候，会把这个commit之后的commit都扔掉。gitreset还支持三种标记，用来标记reset指令影响的范围：
　　1mixed：会影响到暂存区和历史记录区。也是默认选项
　　1soft：只影响历史记录区
　　1hard：影响工作区、暂存区和历史记录区
　　注意：因为gitreset是直接删除commit记录，从而会影响到其他开发人员的分支，所以不要在公共分支（比如develop）做这个操作。
　　1gitcheckout可以将HEAD移到一个新的分支，并更新工作目录。因为可能会覆盖本地的修改，所以执行这个指令之前，你需要stash或者commit暂存区和工作区的更改。
　　ogitrevert和gitreset的目的是一样的，但是做法不同，它会以创建新的commit的方式来撤销commit，这样能保留之前的commit历史，比较安全。另外，同样因为可能会覆盖本地的修改，所以执行这个指令之前，你需要stash或者commit暂存区和工作区的更改。
　　然后，从文件层面来说：
　　ogitreset只是把文件从历史记录区拿到暂存区，不影响工作区的内容，而且不支持mixed、soft和hard。
　　ogitcheckout则是把文件从历史记录拿到工作区，不影响暂存区的内容。
　　ogitrevert不支持文件层面的操作。webpack和gulp区别（模块化与流的区别）
　　参考回答：
　　gulp强调的是前端开发的工作流程，我们可以通过配置一系列的task，定义task处理的事务（例如文件压缩合并、雪碧图、启动server、版本控制等），然后定义执行顺序，来让gulp执行这些task，从而构建项目的整个前端开发流程。
　　webpack是一个前端模块化方案，更侧重模块打包，我们可以把开发中的所有资源（图片、js文件、css文件等）都看成模块，通过loader（加载器）和plugins（插件）对资源进行处理，打包成符合生产环境部署的前端资源。