前端工程化、模塊化方案教程大全，現代前端高手進階必經之路（歡迎收藏）

關注掘金和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的更多重要知識點，感謝掘金這個平臺！