在eval期间移动偏移(使用sourcemap)

Question

我正在从文件加载脚本,我正在使用eval()这样生成一个Javascript代码:

var code = fs.readFileSync('myfile');
var shiftedCode= 'function(param) {' + code + '}\n'+ '//# sourceURL=myfile';
eval(shiftedCode)

问题是当我在代码中放置一个断点或调试器时,它会在正确的一行之后停止两行,因为我想在开头添加了字符.

有没有办法转移sourceURL到正确的起点可能是使用源图？

预先感谢您的帮助.

Answer 1

定义问题

我看到你试图将Javascript代码从一个页面导入到另一个页面并且你遇到了一些问题(你定义了一个,我将定义另一个):

1. 源图/调试器问题:
   • 首先,我不建议在运行时构建源图.类似的工具Gulp,Grunt并且Webpack都是为了帮助您完成这些用例,将让您专注于业务逻辑,并从这些各种各样的问题让你走.
   • 第二个想想将在另一个页面中使用此代码的人.你认为改变源图会没问题吗？这将是每一次转变!
   • 可能的解决方案:这lib也可以帮助您处理用例.首先生成新代码,然后运行它.

var offsetLines = require('offset-sourcemap-lines');
var conv = require('convert-source-map');
var fs = require('fs');
var code = fs.readFileSync('myfile');
var originalMap = conv.fromSource(code).toObject();
var codeBody = conv.removeComments(code);
var offsettedMap = offsetLines(originalMap, 1); // One line to be shifted
var newSourceMapComment = conv.fromObject(offsettedMap).toComment();
var shiftedCode= 'function(param) {\n' + codeBody + '}\n' + newSourceMapComment;
eval(shiftedCode)

2. 小心!你正在使用危险的eval():
   • 使用eval()可以打开程序,最多可以进行几种不同的注入攻击 eval()在大多数情况下的使用可以替代问题的更好的替代方法.
   • 它会导致代码变慢.
   • MDN:不要eval()不必要地使用!

     eval()是一个危险的函数,它执行它以调用者的特权传递的代码.如果您使用可能受恶意方影响的字符串运行eval(),您最终可能会使用您的网页/扩展程序的权限在用户的计算机上运行恶意代码.更重要的是,第三方代码可以看到eval()调用的范围,这可能导致类似函数不受影响的方式的可能攻击.
     
     eval()通常也比替代方案慢,因为它必须调用JS解释器,而许多其他构造由现代JS引擎优化.对于常见用例,
     
     有更安全(和更快!)的替代方案eval().

建议

正如我们同意的那样,您正在尝试导入一些代码.那么,为什么不直接使用其中一个模块化系统用于Javascript,如AMD,RequireJS,CommonJS,ES6模块功能,......

假设您将使用ES6模块,那将非常简单.您需要将myfile脚本导出为模块并将其导入任何位置,就是这样

//  myfile.js
export function sum (x, y) { return x + y }

//  someApp.js
import {sum} from "myfile"
console.log(sum(10, 20));

Answer 2

您可以使用下面的包offset-sourcemap-lines

var offsetLines = require('offset-sourcemap-lines');
var conv = require('convert-source-map');
var fs = require('fs');

var codeWithSourceMapComment = fs.readFileSync('/path/to/code-with-sourcemap-comment.js', 'utf-8');
var originalMap = conv.fromSource(codeWithSourceMapComment).toObject();

var header = 'function(param) {' + code + '}\n';
var offset = header.match(/\n/g).length + 2; //you might need to work on this

var offsettedMap = offsetLines(originalMap, offset);

var codeBody = conv.removeComments(codeWithSourceMapComment);
var newSourceMapComment = conv.fromObject(offsettedMap).toComment();
console.log(header + codeBody + '\n' + newSourceMapComment);