慕課網視訊教程

1.前言

解構賦值、箭頭函式、Set和Map、非同步操作、類和物件、模組化

基本技能：

1.構建工具：gulp、babel、webpack、npm
2.基礎語法
3.實戰演練

在我們的生產實際中，後端的介面往往是較晚才會出來，並且還要寫介面文件，於是我們的前端的許多開發都要等到介面給我們才能進行，這樣對於我們前端來說顯得十分的被動，於是有沒有可以製造假資料來模擬後端介面呢，答案是肯定的。Mock.js，可以非常方便的模擬後端的資料，也可以輕鬆的實現增刪改查這些操作。

mockjs就是一個模擬資料，生成隨機資料，攔截ajax請求。

mockjs：
1.前後端分離
2.不需要修改既有程式碼，就可以攔截 Ajax 請求，返回模擬的響應資料。
3.資料型別豐富
4.通過隨機資料，模擬各種場景。

2.專案構建

基礎架構、任務自動化（gulp）、編譯工具（Babel、webpack）、程式碼實現

babel

babel官網正中間一行黃色大字寫著“babel is a javascript compiler”，翻譯一下就是babel是一個javascript轉譯器。為什麼會有babel存在呢？原因是javascript在不斷的發展，但是瀏覽器的發展速度跟不上。以es6為例，es6中為javascript增加了箭頭函式、塊級作用域等新的語法和Symbol、Promise等新的資料型別，但是這些語法和資料型別並不能夠馬上被現在的瀏覽器全部支援，為了能在現有的瀏覽器上使用js新的語法和新的資料型別，就需要使用一個轉譯器，將javascript中新增的特性轉為現代瀏覽器能理解的形式。babel就是做這個方面的轉化工作。

gulp

1.易於使用：通過程式碼優於配置的策略，Gulp 讓簡單的任務簡單，複雜的任務可管理。

2.構建快速：利用 Node.js 流的威力，你可以快速構建專案並減少頻繁的 IO 操作。

3.外掛高質：Gulp 嚴格的外掛指南確保外掛如你期望的那樣簡潔高質得工作。

4.易於學習：通過最少的 API，掌握 Gulp 毫不費力，構建工作盡在掌握：如同一系列流管道。

gulp搭建環境使用過程中出現的問題：

gulp執行啟動時，而且安裝了babel-core和babel-register，還是會報上面的錯。原因是gulp3和gulp4的區別，，解決方法是檢視package.json配置檔案，把gulp改為3版本，比如3.9.1，然後重新執行npm install。

參考文章：
https://blog.csdn.net/qq_31975963/article/details/83034450
https://www.cnblogs.com/evaxtt/p/9561091.html
https://www.jianshu.com/p/40b99bed3127

然後執行gulp時候資訊第一句說了我們還要安裝babel-core和babel-register，我們進行了安裝，又出來了下面的提示，意思就是babel-loader8.0.4需要和babel-core7.0.0相匹配，也就是說這個有版本依賴，我們可以在package.json修改，然後npm install重新下載。

參考文章：
https://blog.csdn.net/strongbill/article/details/82939358

webpack

WebPack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其它的一些瀏覽器不能直接執行的拓展語言（Scss，TypeScript等），並將其打包為合適的格式以供瀏覽器使用。

當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。

webpack四個核心概念：入口、輸出、loader、外掛。

參考文章：
https://www.webpackjs.com/concepts/
https://segmentfault.com/a/1190000006178770?utm_source=tag-newest
https://www.cnblogs.com/-walker/p/6056529.html

webpack-stream

webpack非常強大,但是也有不足的地方,批量式處理依然是gulp更勝一籌.我們是否可以將兩者的優點結合起來呢? 這篇文章就是講述如何整合gulp和webpack。

npm

可以參考：http://www.cnblogs.com/itlkNote/p/6830682.html

npm install 安裝模組，也就是node_modules這個資料夾。

npm install 命令用來安裝模組到node_modules目錄。

–save 安裝包資訊將加入到dependencies（生產階段的依賴）
–save-dev 安裝包資訊將加入到devDependencies（開發階段的依賴），所以開發階段一般使用它
–save-optional 安裝包資訊將加入到optionalDependencies（可選階段的依賴）

模組的依賴都被寫入了package.json檔案後，他人開啟專案的根目錄（專案開源、內部團隊合作），使用npm install命令可以根據dependencies配置安裝所有的依賴包，比如安裝express框架之後，執行npm install之後，就會工具package.json裡面的依賴進行安裝。

npm init 在專案中引導建立一個package.json檔案，安裝包的資訊可保持到專案的package.json檔案中，以便後續的其它的專案開發或者他人合作使用，也說package.json在專案中是必不可少的。

yargs

大概有一種情況你需要讓你的程式接收一個引數,通過這個引數我們做一系列的定製化功能.常見的做法是 把一些不同環境不同配置的變數寫到 config 配置檔案中.當你的環境變化的時候,你手動去修改你的config 中的變數來達到不同環境顯示定製化的東西.

現在, yargs 的功能就是幫你實現類似上面這種定製化的引數功能.從此一些簡單定製引數可以徹底擺脫 config 配置了.

可以參考文章：http://yijiebuyi.com/blog/a3ea13c5d7a40ac9cb55e2f29d5f4619.html

專案結構