為什麼我們不用sourcemap了？hey-cli預設關閉打包配置

vvpvvp發表於2019-03-04
  • 什麼是source map？
  • webpack目前的source map生成策略
  • 為什麼我們不用source map了？
  • 什麼是反向代理？
  • 我們如何除錯前端BUG？

什麼是source map？

隨著程式碼增多，我們需要對程式碼進行壓縮。
程式碼壓縮後進行調bug定位將非常困難，於是引入sourcemap記錄壓縮前後的位置資訊記錄，當產生錯誤時直接定位到未壓縮前的位置，將大大的方便我們除錯。
—-from 網路
阮一峰寫的一篇文章，JavaScript Source Map 詳解，大家如果感興趣可以看一看。

其實，很多程式設計師有可能不是很瞭解。
但是沒有關係，我們這篇文章主要是關於前端開發、除錯的經驗分享。

webpack目前的打包策略

webpack的 devtool 屬性是用來配置程式碼source map生成策略的。
從適用於開發環境到適用於生產環境，每一種都些微有一些不同。
而 hey-cli 的devtool只選擇開發環境的eval，與生產環境的none，這兩種是webpack打包部署最快的策略，分別都是+++(super fast)的速度。

為什麼我們不用sourcemap了？hey-cli預設關閉打包配置

而其他的關於sourcemap的策略都被我們無視了。
至於下面，我們將列出我們為什麼無視這些sourcemap打包策略的原因。

為什麼我們不用sourcemap了？

1、chrome自帶了pretty print的功能

關於一些程式碼上的錯誤，使用chrome除錯可以直接pretty程式碼，壓縮程式碼經過pretty後，可讀性大大增高。

2、如果build程式碼使用sourcemap，build速度大大降低

sourcemap附帶了很多資訊，如果build需要生成sourcemap，將會大大降低build的速度。

3、我們都是使用原生程式碼來除錯所有環境的BUG

是的，感謝反向代理的機制。
如果問題比較複雜，或者是效能類的，很難從線上的程式碼中除錯出結果。
我們通過修改hey-cli的反向代理配置，即可除錯不同的環境。
最後一章，我們會詳細說明。
如果你對hey-cli不是很瞭解，請移步前端開發大殺器hey-cli，全域性支援vue react es6開發部署。
當然，如果你是使用webpack配置，包括vue-cli等腳手架生成webpack配置，都可以使用。

什麼是反向代理？

這個我就不詳細說明，大家可以看看nginx的一些配置即可。
阮一峰先生也寫了一個初級入門：Nginx 容器教程

webpack反向代理配置

webpack代理配置: devServer.proxy

hey-cli反向代理配置

hey-cli只需要在hey.conf.js中的webpack物件下配置devServer即可，配置和devServer.proxy一致。

hey.conf.js

module.exports = {
  ...
  "webpack": {
    ...
    //define proxy, https://webpack.js.org/configuration/dev-server/#devserver-proxy
    "devServer": {
      "proxy": {
        "/api": {
          "target": "http://0.0.0.0:8080"
        }
      },
      historyApiFallback: true
    }
  }
};
複製程式碼

我們如何除錯前端BUG？

前面說了這麼多，其實只剩下最後一步了。
先說實際操作：
以使用hey-cli為例。
平時的開發環境hey.conf.js：

devServer: {
  proxy: {
    "/api": {
      //開發環境後端
      target: "http://開發環境:8080",
      pathRewrite: { "^/api": "" }
    },
  },
  historyApiFallback: true
},
複製程式碼

除錯正式環境

devServer: {
  proxy: {
    "/api": {
      //正式環境後端
      target: "http://正式環境:8080",
      pathRewrite: { "^/api": "" }
    },
  },
  historyApiFallback: true
},
複製程式碼

重啟hey-cli，訪問開發環境，使用正式環境的後端。

除錯完成，checkouthey.conf.js，提交hotfix。

注意

我們的前端團隊始終保持一個做法：所有環境的前端程式碼是一模一樣的，並且不推薦使用js來判斷不同的環境。
至於為什麼這樣子做，相信大家都可以理解。
關鍵問題是，如何完成這樣的一個設定？
目前我們的做法是，gateway提供一個/envs的介面，每個環境的不同配置通過介面統一獲取。
如果大家感興趣的話，可以繼續討論，看看有沒有什麼更好的施行方案。

相關文章