javascript - 如何在浏览器中生成文件

Question

Angular2 似乎在浏览器中动态生成文件。例如，如果我检查 sources，我可以看到创建了以下文件:

我想知道如何生成这些文件，使它们出现在 (no domain) 部分？我在浏览器中检查了 index.html，但没有看到这些文件的 script 标签。

Answer 1

Angular 使用 new Function() 方法描述 here生成新代码。实现可用 here :

function evalExpression(
    sourceUrl: string, ctx: EmitterVisitorContext, vars: {[key: string]: any}): any {
  const fnBody =
      `${ctx.toSource()}\n//# sourceURL=${sourceUrl}\n${ctx.toSourceMapGenerator().toJsComment()}`;
  const fnArgNames: string[] = [];
  const fnArgValues: any[] = [];
  for (const argName in vars) {
    fnArgNames.push(argName);
    fnArgValues.push(vars[argName]);
  }
  return new Function(...fnArgNames.concat(fnBody))(...fnArgValues);
}

此外，angular 将以下文本附加到生成的文件中:

//# sourceURL=/CommonModule/NgClass/wrapper.ngfactory.js

这会强制浏览器在指定 URL 下的 sources 中的 (no domain) 下显示生成的内容。这是演示 Angular 编译器功能的小片段:

var body = "function my(x, y) {return x+y}; return my; //# sourceURL=/MyCustomURLPath/wrapper.ngfactory.js"
var f = new Function(body)();
var result = f(3, 4);

现在，如果您观察 sources，您将在 /MyCustomURLPath/wrapper.ngfactory.js 下看到生成的代码