本文小編為大家詳細(xì)介紹“ES6語法和webpack壓縮實(shí)例分析”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“ES6語法和webpack壓縮實(shí)例分析”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識(shí)吧。

“專業(yè)、務(wù)實(shí)、高效、創(chuàng)新、把客戶的事當(dāng)成自己的事”是我們每一個(gè)人一直以來堅(jiān)持追求的企業(yè)文化。 成都創(chuàng)新互聯(lián)公司是您可以信賴的網(wǎng)站建設(shè)服務(wù)商、專業(yè)的互聯(lián)網(wǎng)服務(wù)提供商! 專注于做網(wǎng)站、成都網(wǎng)站建設(shè)、軟件開發(fā)、設(shè)計(jì)服務(wù)業(yè)務(wù)。我們始終堅(jiān)持以客戶需求為導(dǎo)向，結(jié)合用戶體驗(yàn)與視覺傳達(dá)，提供有針對(duì)性的項(xiàng)目解決方案，提供專業(yè)性的建議，創(chuàng)新互聯(lián)建站將不斷地超越自我，追逐市場(chǎng)，引領(lǐng)市場(chǎng)！

首先介紹下在本文出現(xiàn)的幾個(gè)比較重要的概念：

函數(shù)計(jì)算（Function Compute）: 函數(shù)計(jì)算是一個(gè)事件驅(qū)動(dòng)的服務(wù)，通過函數(shù)計(jì)算，用戶無需管理服務(wù)器等運(yùn)行情況，只需編寫代碼并上傳。函數(shù)計(jì)算準(zhǔn)備計(jì)算資源，并以彈性伸縮的方式運(yùn)行用戶代碼，而用戶只需根據(jù)實(shí)際代碼運(yùn)行所消耗的資源進(jìn)行付費(fèi)。函數(shù)計(jì)算更多信息 參考。
Fun: Fun 是一個(gè)用于支持 Serverless 應(yīng)用部署的工具，能幫助您便捷地管理函數(shù)計(jì)算、API 網(wǎng)關(guān)、日志服務(wù)等資源。它通過一個(gè)資源配置文件（template.yml），協(xié)助您進(jìn)行開發(fā)、構(gòu)建、部署操作。Fun 的更多文檔 參考。
2.0 版本的 Fun，在部署這一塊做了很多努力，并提供了比較完善的功能，能夠做到將云資源方便、平滑地部署到云端。但該版本，在本地開發(fā)上的體驗(yàn)，還有較多的工作要做。于是，我們決定推出 Fun Init 彌補(bǔ)這一處短板。
Fun Init: Fun Init 作為 Fun 的一個(gè)子命令存在，只要 Fun 的版本大于等于 2.7.0，即可以直接通過 fun init 命令使用。Fun Init 工具可以根據(jù)指定的模板快速的創(chuàng)建函數(shù)計(jì)算應(yīng)用，快速體驗(yàn)和開發(fā)函數(shù)計(jì)算相關(guān)業(yè)務(wù)。官方會(huì)提供常用的模板，用戶也可以自定自己的模板。

背景

當(dāng)我們寫 nodejs 函數(shù)時(shí)，函數(shù)往往會(huì)依賴很多第三方依賴，這樣導(dǎo)致函數(shù)代碼少則幾十兆，多則上百兆。代碼包太大，會(huì)有如下問題：

1. 可能會(huì)導(dǎo)致沒法成功上傳代碼到函數(shù)計(jì)算服務(wù)，因?yàn)楹瘮?shù)計(jì)算服務(wù)對(duì)代碼包大小是有限制的，壓縮后最大不能超過 50 MB，解壓后最大不能超過 250 MB

2. 會(huì)導(dǎo)致冷啟動(dòng)時(shí)間是變大，因?yàn)橄螺d代碼的過程變大了

3. 每次更新代碼時(shí)間變大

另外，函數(shù)計(jì)算目前只支持 nodejs8 和 nodejs6 這兩個(gè)版本，這兩版本不支持 es6 語法，但是我們可能已經(jīng)寫習(xí)慣了 es6 語法該怎么辦呢？

熟悉 nodejs 的同學(xué)應(yīng)該知道，項(xiàng)目工程化管理工具 webpack，我們完全可以通過 webpack 將 es6 代碼編譯成 es5，并且剪切打包壓縮成一個(gè) js 文件，然后將該 js 文件上傳到函數(shù)計(jì)算中運(yùn)行。

快速開始

我這里提供了一個(gè) fun 模板，幫助快速搭建一個(gè)函數(shù)計(jì)算 nodejs 項(xiàng)目骨架，支持 es6 代碼編譯成 es5，并且剪切打包壓縮成一個(gè) js 文件，然后將該 js 文件上傳到函數(shù)計(jì)算中運(yùn)行。操作作步驟如下：

1. 安裝 node

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.5/install.sh | bash
nvm install 8

2. 安裝 fun 工具

npm install @alicloud/fun -g

fun 工具的某些子命令可能會(huì)用到 docker，所以你需要安裝好 docker，具體參考文檔：Fun 安裝教程。

3. 通過 fun 模板生成項(xiàng)目骨架

fun init -n demo https://github.com/muxiangqiu/fc-skeleton-nodejs8.git

項(xiàng)目生成好后，在根目錄下有個(gè) README.md 文件，閱讀該文件可以幫你快速了解項(xiàng)目骨架為你做了什么，以及相關(guān)的命令。具體詳情：README.md。

4. 安裝依賴

cd demo # 切換到項(xiàng)目根下面，后面的所有命令，都是在項(xiàng)目根下面執(zhí)行
npm install

注意：有少數(shù)特殊 npm 模塊的安裝可能會(huì)依賴當(dāng)前系統(tǒng)環(huán)境，為了能正確安裝函數(shù)運(yùn)行時(shí)的系統(tǒng)環(huán)境的 npm 模塊，可以通過 fun install 命令來實(shí)現(xiàn)，比如 puppeteer，具體參考：開發(fā)函數(shù)計(jì)算的正確姿勢(shì) —— 安裝第三方依賴。

5. 編譯

# 生產(chǎn)編譯
npm run build
# 開發(fā)編譯（這種編譯方式不會(huì)進(jìn)行代碼混淆，并且生成 source map 信息，方便開發(fā)調(diào)試）
npm run dev

6. 本地運(yùn)行函數(shù)

fun local invoke demo/demo

7. 運(yùn)行調(diào)試函數(shù)

運(yùn)行調(diào)試之前，請(qǐng)先用 npm run dev  命令編譯源碼，然后以調(diào)試的方式運(yùn)行函數(shù)：

fun local invoke -d 3000 demo

程序會(huì)提示你輸入函數(shù)的 event，如果你不需要輸入，可以按 ctrl+d 跳過輸入，接下來，并不會(huì)繼續(xù)往下執(zhí)行，只有 vs code 的連接上來后，程序才會(huì)繼續(xù)執(zhí)行。如何通過 vs code 連上來，并開始調(diào)試呢？如下圖所示：

8. 部署函數(shù)到云端

部署函數(shù)的時(shí)候需要用到 AK 等下信息，可以通過 fun config 來配置，如果配置過請(qǐng)忽略，部署函數(shù)命令如下：

fun deploy

讀到這里，這篇“ES6語法和webpack壓縮實(shí)例分析”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。