sourceMap以及如何在taro项目中配置sourceMap 进行调试

name_is_undefined
1,437 阅读2分钟

Source Map 教程

背景：

我公司采用taro+react进行小程序项目开发，前人不知道做了什么配置，项目中 无法通过debugger进行调试，因此想通过sourceMap的配置 实现在source页面打断点进行调试。 内容主要分成两部分：（1）介绍sourceMap以及webpack中如何进行配置 （2）taro中如何配置sourceMap

介绍：源代码地图--映射转换后的代码和源代码之间的关系

image.png

1、定义sourcemap 的方式

1.1 在webpack.config.js 文件中使用devtool 定义sourcemap

image-1.png

1.2 webpack中支持的sourcemap 配置类型 （目前共支持26种） webpack.js.org/configurati…

2.常见模式讲解

  • eval 模式：使用eval包裹代码模块（这个代码块是转译后的代码，并未进行打包和压缩），不会生成sourcemap文件，速度更快，可以定位源代码所在文件名称，无法定位行列信息

image-2.png

  • cheap模式 简单source-map 只可以准确定位到行，定位不到列

image-5.png

  • module模式 未经babel 转换过的soucemap

image-4.png

  • nosourcemap 生成soucemap文件但不展示

image-3.png

  • inline 生成单独的soucemap文件，嵌入到js 文件中

3、推荐

  • 开发环境 推荐 ** cheap-module-source-map **
  • 生产环境推荐 ** nosources-source-map **

4、taro小程序中如何配置

尽管taro官网中说可以在mini中通过配置sourceMapType可以实现sourceMap的配置，但是根据我个人尝试这样配置并不能生效，

image-6.png

最终，经多几次尝试发现可以通过在chain.merge 中添加 devtool:'source-map' 的方式实现taro中生成source-map

image-7.png

        devtool: 'source-map',
        <!-- output本来是想排除node_modules中的代码生成.map文件的，但是好像没生效，实际测试用却优化了路径的展示就留着了 -->
        output: {
          devtoolModuleFilenameTemplate: (info) => {
            // 只让 src 文件夹下的代码生成源码映射
            if (info.resourcePath.includes('/src/')) {
              return `webpack:///${info.resourcePath}`
            }
            return `webpack:///./${info.resourcePath}`
          },
        },
avatar
文章
阅读
粉丝