關注掘金和github很久了，但是一直沒有在上面發表什麼文章，這次靜下心來寫了個前端的目前工程化與模組化方案的總結，後期會繼續更新，為開源社群做出更大貢獻。
前端的模組化方案從早年的require.js到 seaJs,commonJs,再到利用webpack打包的ES6模組化方案，換湯不換藥，個人認為seaJs如果能玩得很6，那麼後面的模組化方案都是灑灑水，更印證了那句話：底層的知識尤其重要，什麼框架什麼API，再換他終究是底層的javaScript寫出來的，當然還有如今很火的typeScript，但是最終還是依靠javaScript實現。在學習模組化方案時，必須安裝Node.js,還有npm,這兩個網上有教程，比較簡單安裝過程，這裡不做詳細的講解。
使用npm第一件事， 執行npm init 生成對應的json檔案
如果是使用別人的json檔案，進入第一件事是 開啟json檔案檢視，再npm install 即可
fis3
首先我們說一說fis3，依靠Node.js的npm下載，我們一般用來建立一個小型本地伺服器，可以讓程式碼在手機上跑起來，不然每次總不能都打包成APP再安裝測試吧，這樣也效率不高，而且放在伺服器上大家都可以一起測試一下。
fis3是命令列工具 開啟系統的命令列工具輸入下面的程式碼即可
注意，一定要按順序執行
fis3 server open 開啟伺服器的那個目錄 fis3 server start 啟動伺服器 通過ipconfig檢視ip 手機連線電腦同一個區域網開啟地址 fis3 server stop 停止伺服器執行 手機端開啟瀏覽器後輸入地址，預設會找到伺服器目錄中的index.html檔案執行
CMD模組化方案
CMD的模組化方案依靠seaJs來實現，AMD即require.js來實現，但是AMD已經完全落伍，這裡不做介紹。 seaJs可以使用CDN，也可以下載JS檔案引入
seaJs核心：
1.aJs遵循，一個define函式函式，為一個模組，define函式{}內部引用其他模組所需要填寫路徑時，參考define函式所在的JS檔案填寫，這句話尤為重要，一定要看清楚！
2.seajs的模組化定義
define(function(require,exports,module){} 這裡函式引數不建議修改
3.模組的引入 在所需要引入模組的define函式{}內 require('url')，如果被引入的模組有暴露介面（介面可能是一個物件，函式，變數）， 那麼可以直接var app=require('url'), 如果那邊暴露的是一個變數，這邊就可以直接用app代替，如果是一個物件，那麼可以用 app.**的形式使用，如果是一個函式，那麼可以app()方式直接呼叫，是不是有點像最開始的名稱空間？ 4.模組的介面暴露
兩種方案：
modelu.exports =>{}<= exports
上面這段程式碼，意思是什麼呢？相信很多人只會用，不知道原理 ，
exports:首先對於本身來講是一個變數（物件），它不是module的引用，它是{}的引用，它指向module.exports的{}模組 module.exports:首先，module是一個變數，指向一塊記憶體，exports是module中的一個屬性，儲存在記憶體中，然後exports屬性指向{}模組，如果要粗糙點理解，可以理解成在一個JS檔案中，他們同時指向了一個空的物件，如果都是用 exports.a=app , module.exports.b = app的形式去暴露app,那麼他們的效果都是一樣的，都是給這個空物件新增了屬性而已，不過如果exports如果不適用.的形式暴露就是無效的。
5.模組化合並
在index.html的檔案中,script標籤， seajs.use('url'),此時參考自身html檔案所在位置填寫url路徑,一般這個入口檔案我們填寫成 index.js，在index.js檔案中我們把所有的js檔案中的程式碼複製過來。
這樣一個index.js檔案中就有了多個difine函式， 在頂部的difine函式中這樣填寫difine(相對於index.html的url,[需要註冊的JS檔案相對於index.js的url，需要註冊的JS檔案相對於index.js的url....],function (require, exports, module) {}，這裡為什麼需要註冊，意思是告訴seajs，我們 需要使用這些模組，在下面都定義好了。
下面是一個實際的 案例
index.html中 seajs.use('./js/index.js')
在index.js中
define("../js/index.js", ["./css.js", "./demo.js", "./nav.js", "./tap.js"], function (require, exports, module) {}
define("../js/css.js", function (require, exports, module) {}
define("../js/nav.js", function (require, exports, module) {}
define("../js/demo.js", function (require, exports, module) {}
define("../js/tap.js", function (require, exports, module) {}
這裡暴露介面的方式需要多次嘗試，使用變數去接住require的模組暴露的值的時候，命令方式也要考慮。
seajs的東西搞懂，那麼commonjs和ES6模組化方案，就比較簡單了。
commonjs模組化方案 依靠 broserify完成，broserify也是一個命令列工具，通過npm下載 大家有興趣可以去broserify上的官網去看看
commonJS
broserify 通過npm下載，命令列工具
broserify xx.js -o xx.js 這樣就完成了編譯
預設一個模組一個JS檔案，暴露介面只能用module.export暴露
引入也是require的方式，通過broserify編譯後產生的新檔案，直接在html中引入即可，這樣模組化就完成了。
ES6模組化方案 依賴 webpack@3.10.0版本完成
通過npm下載
npm i @webpack 3.10.0 --save-dev
暴露介面使用export default {}方式， {}裡面可以一次暴露多個內容，比如 export.default {a,b,c} ， 這樣就把a,b,c三個變數都暴露出去了
引入使用通過import ** from 'url'的方式引入
比如 import jerry from './js/app.js', 那麼jerry.a 就是暴露的那個a變數。
為什麼只教這一種方案 因為這種方案使用最多
git
通過官網下載exe的應用程式，然後在專案內部的資料夾右鍵空白處啟動
有linux和git命令
開啟git第一件事git init-y
echo 字串 > 檔案 ， 為檔案寫入內容，會覆蓋操作，沒有這個檔案則新建
vim 檔案 , vim編輯器，編輯檔案後需要再次新增到暫存區 （VIM編輯器）
cat 檔案url ，檢視檔案的內容
find .git/objects -type -f 檢視當前的版本庫 內容
git rm 檔名， 可以刪除版本庫裡面的檔案
git ls-files -s 檢視當前暫存區的內容
git cat-files -p / -t 檢視物件的索引 ，可以檢視物件的內容或者檔案型別
git add ./ 或者 git add 檔案url 把當前所有未跟蹤檔案或指定檔案新增到暫存區 並跟蹤
git commit -a -m'' 將當前已追蹤的檔案直接提交
git commit -m 提交當前暫存區的所有檔案
git reset --soft HEAD~ == 把指標指向上次的提交物件
git reset --mixed HEAD~ 把指標指向上次的提交物件 , 暫存區也重置成上次的提交物件所對應的樣子 mixed不寫也可以 預設的
git reset -- hard HEAD~ 把指標指向上次的提交物件，暫存區和工作區域也重置上次的提交物件所對應的樣子，這是git裡唯一的危險操作， 如果沒有及時add工作區的內容，那麼使用此條命令便會直接覆蓋，存在檔案丟失的風險。
上面的HEAD抽象指向最後一次的提交物件，後面加~則是指向上一次的提交物件。
git checkout 分支名， 跳到分支上。
git checkout -b 分支名 新建分支名 並且跳到分支上
git checkout commit +檔名 ， 跳過HEAD的移動這一步，進行暫存區的覆蓋和工作目錄的覆蓋。
git branch 檢視當前所有分支
git branch -vv 檢視當前所有跟蹤分支
git branch -b 遠端跟蹤分支名，讓當前本地分支變成對應的遠端跟蹤分支的跟蹤分支，可以使用git pull來自動匹配檔案和合並分支
git fetch 當前跟蹤分支名 獲取庫的最新資料，但是不會自動合併分支，需要手動修改
git branch -u 遠端跟蹤分支名， 將目前所在分支顯示的制定成對應的遠端跟蹤分支的跟蹤分支，可以使用pull命令
git pull ，在跟蹤分支上使用，直接獲取最新的遠端跟蹤分支的引用，並且移動至最新的位置，自動合併分支。
git push +想要推送的那個分支名 + 推送對應的遠端跟蹤分支
git clone url 首次獲取遠端資料庫的資料，然後自動創立遠端跟蹤分支和本地分支（這個本地分支也是對應的遠端跟蹤分支的跟蹤分支。
專案經理的操作流程：
git remote add name url 建立庫
git push name master 推送資料到庫 然後成員便可以下載
如果專案自己需要下載最新資料，建議將目前本地的master分支使用git branch -u name/master 命令顯示制定為對應的跟蹤分支
一個跟蹤分支只能對應一個遠端跟蹤分支，但是一個遠端跟蹤分支可以對應多個跟蹤分支。
babel 編譯ES6的程式碼，讓其在不支援ES6的瀏覽器上執行
通過npm下載 @babel/core @babel/cli兩個基本的檔案
然後是外掛 通過npm 下載 在.babelrc檔案在{}裡面定義plugins 即可使用。
如果是套餐，只需要在.babelrc檔案中註明，在npm中下載，即可使用
如果是require（）模組，commonJS的模組化方案，可以使用broserify或者webpack進行打包
還可以結合eslint 進行限制git的檔案上傳 pre-commit 配置
後期會繼續更新ES6/7，typeScript，以及原生javaScirtp，H5,C3的更多重要知識點，感謝掘金這個平臺！