前端學習——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。