如何在浏览器中生成文件

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

强制浏览器在指定网址下的(no domain) sources下显示生成的内容。这是演示角度编译器的小代码片段：

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

下看到生成的代码