[ 文章很乱, 没有整理, 只用于记录下一些思考 ]
写这篇文章,主要是因为在项目的快速迭代过程中, 前端开发人员 如何 部署给 测试人员测试 ,有利于前端更好的调试定位问题 ?
问题
大家肯定遇到过这样一个问题, 测试给你提的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
