【React】代码封版之前的一些对开发,调试,测试的思考

[ 文章很乱, 没有整理, 只用于记录下一些思考 ]

写这篇文章,主要是因为在项目的快速迭代过程中, 前端开发人员 如何 部署给 测试人员测试 ,有利于前端更好的调试定位问题 ?

问题

大家肯定遇到过这样一个问题, 测试给你提的BUG, 你不知道 是哪里引发这个鬼BUG的?
定位问题, 直接在浏览器上定位是最方便的. 因为如果前端代码 和后端代码是 部署在一起的, 本地想要跑起来, 还需要 部署 后端环境, 这对前端开发人员, 实在是坑啊. 一直追求的 前后端分离就.....

因此,如何能在浏览器上, 直接看代码, 定位问题呢?

对于如何定位问题, 不同的开发模式有不一样的方法.

1. 原始开发模式

各个 JS 文件,在 html 中引入 , 不使用模块化工具(requirejs,seajs)

定位问题

1. 问题简单,直接看BUG情况, 就可以大概知道哪里有问题
2. 问题复杂,只能去找在哪一步操作出现该问题, 定位到执行 产生错误的操作步骤 所执行的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