【前端】SourceMap帮助开发者调试代码

演化计算与人工智能

发布于 2022-01-24 13:57:18

9000

发布于 2022-01-24 13:57:18

文章被收录于专栏：人工智能与演化计算成长与进阶人工智能与演化计算成长与进阶

一、sourceMap帮助开发者调试代码

1.1 devtool配置

1.1.1 devtool:'none'

devtool:'none'

报错提示：
main.js:96 Uncaught TypeError: console.logg is not a function
    at Object../src/index.js (main.js:96)
    at __webpack_require__ (main.js:20)
    at main.js:84
    at main.js:87

如果不小心写错了代码，打包之后，会提示报错信息，根据提示只能找到打包后的文件，不能找到源代码的文件。

1.1.2 devtool:'eval-source-map'

devtool:'eval-source-map'

  提示：
index.js?b635:1 Uncaught TypeError: console.logg is not a function
    at eval (index.js?b635:1)
    at Object../src/index.js (main.js:96)
    at __webpack_require__ (main.js:20)
    at main.js:84
    at main.js:87

这里就指向了源代码的报错位置，更利于开发的修改。source-map 打包之后会生成一个.map文件，是打包文件与源文件的映射文件。

1.1.3 配置开发环境

mode:'development',
devtool:'cheap-module-eval-source-map', // 开发环境   优点：有错误代码提示  打包速度较快

1.1. 4 配置生产环境

mode:'production',
devtool:'cheap-module-source-map', // 生产环境 打包一次，错误代码提示

1.1.5 总结

**cheap:错误代码只定位到行，不会定位到列 **
**module:错误代码不仅提示源代码，还提示loader中的报错信息 **
eval:不会生成map文件，会使用eval语句展示映射关系

二、简化打包流程

2.1 安装依赖

npm install webpack-dev-server --save-dev

2.2 修改package.json

  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "dev": "webpack-dev-server"
  },

2.3 npm run dev

之前的开发流程：修改源代码 -> 重新执行 npm run build 进行打包 -> 刷新页面 -> 看到最新的源代码执行的结果。

使用webpackDevServer 优化流程: 修改了源代码 -> 直接就看到最新的源代码执行的结果。（npm run dev）提升开发效率

devServer:{
    contentBase:'./dist',
    open:true, //在server启动后打开浏览器
    port: 3000, // 指定监听请求的端口号
  },

2.4 watch

"watch":"webpack --watch",

监听源代码是否变化，如果变化就重新打包，但是打包后的文件没有index文件，需要自己手动添加

三、请求转发

由于在实际情况下，线上环境和本地环境不是同一个地址，本地开发需要做代理。

3.1 安装依赖

npm install axios --save-dev

3.2 配置webpack.config.js文件

devServer:{
    contentBase:'./dist',
    open:true,//在server启动后打开浏览器
    port: 3000,// 指定监听请求的端口号
    proxy:{
      '/Yixiantong':{
        target:'http://study.jsplusplus.com',
        changeOrigin:true
      }
    }
  },

3.3 index.js文件

import axios from "axios"

axios.get('/Yixiantong/getHomeDatas').then(res=>{
    console.log("res+++",res)
})

请求到/Yixiantong/getHomeDatas现在会被代理到请求 http://localhost:3000/Yixiantong/getHomeDatas

proxy:{
 '/api':{
   target:'http://study.jsplusplus.com',
       // target:'https://study.jsplusplus.com',// 如果是https，需要 secure:false,
       // secure:false,
       changeOrigin:true,
       pathRewrite:{
        '^/api':'' //以/api开头的都设置为''  比如abc/api 等价于'' 意思是请求接口不需要以api开头，但是前端写的时候会有/api/
       }
      }
    }