Question

我有这些模板文件，我从中提取代码。它们很像vue模板文件 someView.html:

<title>Editor View</title>

<config>
  <window width=512 height=512 target="main" />
  <load pre="default" modCode=true modCss=true />
</config>

<body>
  <h1>Editor</h1>
  ...
</body>

<style>
  h1 {
     background: black;
     color: white;
     /*...*/
  }
</style>

<script>
  let test = 'confirmed';
  console.log(test);
</script>

显然，这并没有通过任何html linter测试，但我所做的只是提取每个标签的内容并使用它们在Electron中动态构建页面。唯一的问题是，我喜欢console.log()或脚本产生的任何错误，通过sourcemapping在检查器中显示此文件，并在检查css规则时指向此文件，但我＆＃ 39;我对此不太熟悉。

更新

我找到了这个图书馆source-map-dummy，我花了一些时间尝试根据自己的需要调整它。现在我有以下

import path from "path"
import fs from "fs"

import jsTokens from "js-tokens"
import cssTokens from "css-tokens"

import { SourceMapGenerator } from "source-map"


const blank = /^\s*$/
const newline = /\r\n?|\n/


export default function createSourceMap(input, options = {}) {
  if (!options.source) {
    throw new Error("`options.source` is required. Got: " + options.source)
  }

  let tokens

  if (typeof input === "string") {
    switch (options.type) {
      case "js":
        tokens = input.match(jsTokens)
        break
      case "css":
        tokens = input.match(cssTokens)
        break
      default:
        throw new Error("You must set `options.type` to either `js` or `css`. Got: " + options.type)
    }
  } else {
    throw new Error("A string of JavaScript or CSS is required. Got: " + input)
  }

  let code = fs.readFileSync(options.source, "utf8"),
      localSource = options.source.slice(options.source.indexOf("view")),
      map = new SourceMapGenerator({
        file: __dirname
      }),

      line = 1,
      lineOffset,

      column = 0,
      columnOffset,

      codeLines = code.split(newline),
      indexLine = input.split(newline)[1]

  for(let c in codeLines) {
    let codeLine = codeLines[c],
        i = codeLine.indexOf(indexLine)

    if(i != -1) {
      lineOffset = parseInt(c)
      columnOffset = parseInt(i)
    }
  }

  tokens.forEach(function(token) {
    if (blank.test(token)) return;

    map.addMapping({
      generated: {
        line: line,
        column: column
      },
      original: {
        line: line + lineOffset,
        column: column + columnOffset
      },
      source: localSource
    })

    let lines = token.split(newline),
        lastLine = lines.pop(),
        addedLines = lines.length

    if (addedLines) {
      line += addedLines
      column = lastLine.length
    } else {
      column += lastLine.length
    }
  })

  return map
}

这几乎适用于CSS，它至少显示虽然只有第一个规则得到正确的行号??但是Dev Tools无法识别Javascript端，我无法弄清楚为什么。我现在几乎不知所措。

如何为解压缩的代码段生成源图

更新

0 个答案: