前端学习——Babel、Webpack、Git

babel

Babel 三个主要处理步骤分别是： 解析（parse），转换（transform），生成（generate）。  

解析

将代码解析成抽象语法树（AST），每一个js引擎（好比Chrome浏览器中的V8引擎）都有本身的AST解析器，而Babel是经过Babylon实现的。在解析过程当中有两个阶段：词法分析和语法分析，词法分析阶段把字符串形式的代码转换为令牌（tokens）流，令牌相似于AST中节点；而语法分析阶段则会把一个令牌流转换成 AST的形式，同时这个阶段会把令牌中的信息转换成AST的表述结构。 

转换 

在这个阶段，Babel接受获得AST并经过babel-traverse对其进行深度优先遍历，在此过程当中对节点进行添加、更新及移除操做。这部分也是Babel插件介入工做的部分。  

生成 

将通过转换的AST经过babel-generator再转换成js代码，过程就是深度优先遍历整个AST，而后构建能够表示转换后代码的字符串。

webpack的工做流程是什么？ 

一、合并shell和webpack.config.js中的配置参数，并将其传入webpack对象的构造函数中，对应entry-option阶段 

二、在构造函数内部会初始化compiler对象，其具备一个run方法，是webpack的实际入口。调用该方法，会构建出compilation对象，该对象内部包含了每一个构建环节和输出环节中所须要的方法，例如addEntry() , _addModuleChain() , buildModule() , seal() , createChunkAssets()等，对应compile阶段 

三、经过调用addEntry() 方法，会根据Entry字段寻找入口js文件，并调用私有方法 _addModuleChain开始构建模块，对应make阶段 

四、构建过程当中利用各类loader整合资源，生成js module，利用acorn将js module转换为抽象语法树AST，并遍历AST，将 require() 中的模块经过 addDependency() 添加到数组中，当前模块构建完成后，webpack 调用 processModuleDependencies() 开始递归处理依赖的 module，对应build-module阶段 

五、在全部模块及其依赖模块构建完成后，webpack 会监听 seal 事件调用各插件对构建后的结果进行封装，并逐次对每一个 module 和 chunk 进行整理，生成编译后的源码，合并，拆分，生成 hash ，对应seal阶段 

六、webpack 会调用 Compilation 中的 createChunkAssets 方法根据template进行打包后代码的生成，在此过程当中会将源代码里的require()调用替换成webpack模块加载代码，对应emit阶段。最后一步，webpack 调用 Compiler 中的 emitAssets() ，按照 output 中的配置项将文件输出到了对应的 path 中，从而 webpack 整个打包过程结束。 

webpack的优点

一、代码拆分（支持异步模块加载） 

Webpack 有两种组织模块依赖的方式，同步(默认)和异步（高级）。异步依赖做为分割点，造成一个新的块。在优化了依赖树后，每个异步区块都做为一个文件被打包。 

二、Loader（支持任意模块加载，好比图片、less、css等等） 

Webpack 自己只能处理原生的 JavaScript 模块，可是 loader 转换器能够将各类类型的资源转换成 JavaScript 模块。这样，任何资源均可以成为 Webpack 能够处理的模块。 

 三、智能解析

 Webpack 有一个智能解析器，几乎能够处理任何第三方库，不管它们的模块形式是 CommonJS、 AMD 仍是普通的 JS 文件。甚至在加载依赖的时候，容许使用动态表达式 require("./templates/" + name + ".jade")。

 四、插件系统

Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还能够开发和使用开源的 Webpack 插件，来知足各式各样的需求。 

五、快速运行 

Webpack 使用异步 I/O （NodeJs）和多级“缓存”提升运行效率，这使得 Webpack 可以以使人难以置信的速度快速增量编译。

webpack 之 loader 和 plugin

webpack经常使用的loader

1. 样式：style-loader、css-loader、less-loader、sass-loader等

2. 文件：raw-loader、file-loader 、url-loader等

3. 编译：babel-loader、coffee-loader 、ts-loader等

4. 校验测试：mocha-loader、jshint-loader 、eslint-loader等

webpack经常使用的plugin

1. 首先webpack内置UglifyJsPlugin，压缩和混淆代码。

2. webpack内置CommonsChunkPlugin，提升打包效率，将第三方库和业务代码分开打包。

3. html-webpack-plugin能够根据模板自动生成html代码，并自动引用css和js文件

4. extract-text-webpack-plugin将js文件中引用的样式单独抽离成css文件

5. DefinePlugin编译时配置全局变量，这对开发模式和发布模式的构建容许不一样的行为很是有用。

6. HotModuleReplacementPlugin 热更新

7. optimize-css-assets-webpack-plugin 不一样组件中重复的css能够快速去重

8. compression-webpack-plugin 生产环境可采用gzip压缩JS和CSS

webpack 热更新原理

热更新就是 在应用程序的开发环境，方便开发人员在不刷新页面的状况下，就能修改代码，而且直观地在页面上看到变化的机制。

HotModuleReplacementPlugin();

module.exports = {
  // ...
  devServer: {
    hot: true,
    // ...
  }
}复制代码

webpack插件的生命周期

初始化-->编译--->分析入口文件，建立模块对象--->构建模块--->对象构建完毕，完成编译---->编译器输出assets--->结束

webpack遵循哪些规范 AMD和commonjs 这两个有什么区别

Webpack支持CommonJS规范和AMD规范。

commonJS用同步的方式加载模块。在服务端，模块文件都存在本地磁盘，读取很是快，因此这样作不会有问题。可是在浏览器端，限于网络缘由，更合理的方案是使用异步加载。

AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用require.config()指定引用路径等，用define()定义模块，用require()加载模块。

介绍下 webpack 热更新原理，是如何作到在不刷新浏览器的前提下更新页面

1.当修改了一个或多个文件；
2.文件系统接收更改并通知webpack；
3.webpack从新编译构建一个或多个模块，并通知HMR服务器进行更新；
4.HMR Server 使用webSocket通知HMR runtime 须要更新，HMR运行时经过HTTP请求更新jsonp；
5.HMR运行时替换更新中的模块，若是肯定这些模块没法更新，则触发整个页面刷新。

git fetch和pull区别， git reset --soft 和 --hard区别

fetch 只能更新远程仓库的代码为最新的，本地仓库的代码还未被更新，须要经过 git merge origin/master 来合并这两个版本，你能够把它理解为合并分支同样的。

pull 操做是将本地仓库和远程仓库（本地的）更新到远程的最新版本。

若是想要更加可控一点的话推荐使用fetch + merge。

git reset –-soft：回退到某个版本，只回退了commit的信息，不会恢复到index file一级。若是还要提交，直接commit便可；

git reset -–hard：完全回退到某个版本，本地的源码也会变为上一个版本的内容，撤销的commit中所包含的更改被冲掉；

Git stash

stash用于临时保存工做目录的改动。

开发中可能会遇到代码写一半须要切分支打包的问题，若是这时候你不想commit的话，就可使用该命令。若是须要恢复工做目录可使用git stash pop。