javascript - 在 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)

1. 小心!您正在使用危险的 eval():
   • 使用 eval() 可以打开一个程序，进行多种不同的注入(inject)攻击。在大多数情况下使用 eval() 可以替代解决问题的更好的替代方法。
   • 这会导致代码变慢。
   • MDN: Don't use eval() needlessly!

     eval() is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage/extension. More importantly, third-party code can see the scope in which eval() was invoked, which can lead to possible attacks in ways to which the similar Function is not susceptible.
     
     eval() is also generally slower than the alternatives, since it has to invoke the JS interpreter, while many other constructs are optimized by modern JS engines.
     
     There are safer (and faster!) alternatives to eval() for common use-cases.

建议

正如我们所同意的，您正在尝试导入一些代码。那么，为什么不直接使用其中一种用于 Javascript 的模块化系统，例如 AMD、RequireJS、CommonJS、ES6 模块功能……

假设您将使用 ES6 modules ，这将是非常直截了当的。您需要将 myfile 脚本导出为模块并将其导入到任何地方，就是这样

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

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