mpvue sourcemap生成格式错误，导致还原失败

sqserrrh 于 2021-11-30 发布在 Java

关注(0)|答案(3)|浏览(312)

productionSourceMap: true的时候，sourcemap生成格式错误，mappings缺少分号

**mpvue 版本号：2.0.0

最小化复现代码：

[建议提供最小化可运行的代码：附件或文本代码]
直接用快速上手的demo就可以复现http://mpvue.com/mpvue/quickstart.html

// 还原脚本
const fs = require('fs')
const SourceMap = require('source-map')

async function originalPositionFor(line, column) {
   const sourceMapFilePath = "/Users/smithdeng/Desktop/testd/mpvue_demo_to_reappear_sourcemap_bug/reappear_sourcemap_bug/dist/wx/app.js.map"
   const sourceMapConsumer = await new SourceMap.SourceMapConsumer
                            (JSON.parse(fs.readFileSync(sourceMapFilePath, 'utf8')))
   const res = sourceMapConsumer.originalPositionFor({
      line,
      column,
   })
   console.log(res)
}

originalPositionFor(3,506)

问题复现步骤：

下载快速上手的demo,http://mpvue.com/mpvue/quickstart.html
把config/index.js的productionSourceMap改成true
npm run build:wx

观察到的表现：

dist目录下生成的map文件的mappings缺少分号，无法使用map来还原

我手动把分号补齐之后，就可以还原成功了

请看下图：

截图或动态图：

mpvue

来源：https://github.com/Meituan-Dianping/mpvue/issues/1822

3条答案

按热度按时间

apeeds0o1#

webpack-mpvue-asset-plugin 作为 mpvue 的资源路径解析插件，处理依赖模块的引用，增加了 require(xxx) 的代码，为什么会对 UglifyJsPlugin 的 SourceMap 造成影响呢？

entryChunk.files.forEach(filePath => {
      const assetFile = compilation.assets[filePath]
      const extname = path.extname(filePath)
      let content = assetFile.source()

      chunks.reverse().forEach(chunk => {
        chunk.files.forEach(subFile => {
          if (path.extname(subFile) === extname && assetFile) {
            let relativePath = upath.normalize(relative(filePath, subFile))

            // 百度小程序 js 引用不支持绝对路径，改为相对路径
            if (extname === '.js') {
              relativePath = getRelativePath(relativePath)
            }

            if (/^(\.wxss)|(\.ttss)|(\.acss)|(\.css)$/.test(extname)) {
              relativePath = getRelativePath(relativePath)
              content = `@import "${relativePath}";\n${content}`
            } else if (!(/^\.map$/.test(extname))) {
              content = `require("${relativePath}")\n${content}`
            }
          }
        })
        assetFile.source = () => content
      })
    })

======================================================================================
2021-02-07 更新

MpvuePlugin.prototype.apply = compiler => compiler.plugin('emit', emitHandle)

问题出在插件是在 emit 阶段执行的，即准备生成文件时注入了 require(xxx) 的代码，生成 sourceMap 的环节之前已经完成了

赞(0）回复(0）举报 2021-11-30

gzjq41n42#

所以得让生成sourcemap这个步骤后置对吧

赞(0）回复(0）举报 2021-11-30

tcomlyy63#

解决思路：针对入口区块（entryChunk）的 entryChunk.files 中的 .map 文件做处理， chunk 数对应插入的 require 代码行数，即添加相应数量的分号。

修改后的 webpack-mpvue-asset-plugin 如下：

const path = require('path')
const upath = require('upath')
const relative = require('relative')

const getRelativePath = (filePath) => {
  if (!/^\.(\.)?\//.test(filePath)) {
    filePath = `./${filePath}`
  }
  return filePath
}

const emitHandle = (compilation, callback) => {
  Object.keys(compilation.entrypoints).forEach(key => {
    const { chunks } = compilation.entrypoints[key]
    const entryChunk = chunks.pop()

    entryChunk.files.forEach(filePath => {
      const assetFile = compilation.assets[filePath]
      const extname = path.extname(filePath)
      let content = assetFile.source()

      chunks.reverse().forEach(chunk => {
        chunk.files.forEach(subFile => {
          if (path.extname(subFile) === extname && assetFile) {
            let relativePath = upath.normalize(relative(filePath, subFile))

            // 百度小程序 js 引用不支持绝对路径，改为相对路径
            if (extname === '.js') {
              relativePath = getRelativePath(relativePath)
            }

            if (/^(\.wxss)|(\.ttss)|(\.acss)|(\.css)$/.test(extname)) {
              relativePath = getRelativePath(relativePath)
              content = `@import "${relativePath}";\n${content}`
            } else if (!(/^\.map$/.test(extname))) {
              content = `require("${relativePath}")\n${content}`
            }
          }
        })
        assetFile.source = () => content
      })

      if ((/^\.map$/.test(extname))) {
        content = JSON.parse(content)
        content.mappings = new Array(chunks.length).fill(';').join('') + content.mappings
        content = JSON.stringify(content)
        assetFile.source = () => content
      }

    })

  })
  callback()
}

function MpvuePlugin() {}
MpvuePlugin.prototype.apply = compiler => compiler.plugin('emit', emitHandle)

module.exports = MpvuePlugin

赞(0）回复(0）举报 2021-11-30

我来回答

mpvue sourcemap生成格式错误，导致还原失败

productionSourceMap: true的时候，sourcemap生成格式错误，mappings缺少分号

3条答案

相关问题

热门标签

最新问答