ES6語法和webpack壓縮實例分析

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

首先介紹下在本文出現的幾個比較重要的概念：

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

背景

當我們寫 nodejs 函數時，函數往往會依賴很多第三方依賴，這樣導致函數代碼少則幾十兆，多則上百兆。代碼包太大，會有如下問題：

1. 可能會導致沒法成功上傳代碼到函數計算服務，因為函數計算服務對代碼包大小是有限制的，壓縮后最大不能超過 50 MB，解壓后最大不能超過 250 MB

2. 會導致冷啟動時間是變大，因為下載代碼的過程變大了

3. 每次更新代碼時間變大

另外，函數計算目前只支持 nodejs8 和 nodejs6 這兩個版本，這兩版本不支持 es6 語法，但是我們可能已經寫習慣了 es6 語法該怎么辦呢？

熟悉 nodejs 的同學應該知道，項目工程化管理工具 webpack，我們完全可以通過 webpack 將 es6 代碼編譯成 es5，并且剪切打包壓縮成一個 js 文件，然后將該 js 文件上傳到函數計算中運行。

快速開始

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

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 工具的某些子命令可能會用到 docker，所以你需要安裝好 docker，具體參考文檔：Fun 安裝教程。

3. 通過 fun 模板生成項目骨架

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

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

4. 安裝依賴

cd demo # 切換到項目根下面，后面的所有命令，都是在項目根下面執行
npm install

注意：有少數特殊 npm 模塊的安裝可能會依賴當前系統環境，為了能正確安裝函數運行時的系統環境的 npm 模塊，可以通過 fun install 命令來實現，比如 puppeteer，具體參考：開發函數計算的正確姿勢 —— 安裝第三方依賴。

5. 編譯

# 生產編譯
npm run build
# 開發編譯（這種編譯方式不會進行代碼混淆，并且生成 source map 信息，方便開發調試）
npm run dev

6. 本地運行函數

fun local invoke demo/demo

7. 運行調試函數

運行調試之前，請先用 npm run dev  命令編譯源碼，然后以調試的方式運行函數：

fun local invoke -d 3000 demo

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

8. 部署函數到云端

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

fun deploy

讀到這里，這篇“ES6語法和webpack壓縮實例分析”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。