[ 文章很亂, 沒有整理, 只用于記錄下一些思考 ]
寫這篇文章,主要是因為在項目的快速迭代過程中, 前端開發人員 如何 部署給 測試人員測試 ,有利于前端更好的調試定位問題 ?
問題
大家肯定遇到過這樣一個問題, 測試給你提的BUG, 你不知道 是哪里引發這個鬼BUG的?
定位問題, 直接在瀏覽器上定位是最方便的. 因為如果前端代碼 和后端代碼是 部署在一起的, 本地想要跑起來, 還需要 部署 后端環境, 這對前端開發人員, 實在是坑啊. 一直追求的 前后端分離就.....
因此,如何能在瀏覽器上, 直接看代碼, 定位問題呢?
對于如何定位問題, 不同的開發模式有不一樣的方法.
1. 原始開發模式
各個 JS 文件,在 html 中引入 , 不使用模塊化工具(requirejs,seajs)
定位問題
- 問題簡單,直接看BUG情況, 就可以大概知道哪里有問題
- 問題復雜,只能去找在哪一步操作出現該問題, 定位到執行 產生錯誤的操作步驟 所執行的JS 文件.
這種開發模式,中規中矩,定位問題沒有很好的定位問題反方案
2. 模塊化開發模式
使用 requirejs 或者 seajs 管理各個JS 文件的加載
定位問題
和上面定位的方式一樣
3. 打包成一個JS文件
由于把所有使用到的JS,打包(壓縮,混淆)成一個JS文件, 因此并不能向上面一樣,直接在瀏覽器上定位問題
目前比較流行的打包技術有一下兩種. browserify , webpack
如何做到像上面的定位方式呢?
webpack 添加 source-map 配置
module.exports = {
devtool: 'source-map', //如果發布的時候，必須注釋掉，否則生成的文件特別大
entry: {
app: path.join(__dirname, 'src/index'),
common: path.join(__dirname, 'src/common')
},
output: {
path: path.join(__dirname, 'static'),
filename: '[name].bundle.js',
chunkFilename: 'chunk/[chunkhash:8].chunk.min.js',
publicPath: '/FileManage/static/'
}
}
這樣就可以在瀏覽器上直接 看到源碼.
Paste_Image.png
