angular2如何创建bundles目录，以及如何生成源地图? [英] how angular2 create bundles directory and how do I generate source map?

问题描述

我想调试angular2的打字稿源代码.但是我在bundles目录中找不到源映射文件.那么angular2如何创建bundles目录?我可以自己生成吗?

I want to debug the typescript source code of angular2. But I can not find source map file in bundles directory.So how angular2 creates bundles directory? And Can I generate it myself?

推荐答案

您可以将SystemJS配置为从单独的文件而不是捆绑的文件中加载Angular2模块.

You could configure SystemJS to load Angular2 modules from separate files instead of the bundled ones.

<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>

<script>
  System.config({
    defaultJSExtensions: true,
    map: {
      angular2: 'node_modules/angular2',
      rxjs: 'node_modules/rxjs'
    },
    packages: {
      app: {
        defaultExtension: 'js',
        format: 'register'
      },
      angular2: {
        defaultExtension: 'js',
      }
    }
  });
  System.import('app/boot')
        .then(null, console.error.bind(console));
</script>

通过以下方式将源映射嵌入在 node_modules/angular2 文件夹中的JS文件中:

Source maps are embedded in JS files in the node_modules/angular2 folder this way:

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjoz(...)

这样，您将能够使用DevTools将断点放入Angular2 TypeScript文件中.

This way you will be able to put breakpoints into Angular2 TypeScript files using DevTools.

请注意，使用这种方法会增加应用程序的负载...

Notice that the application load will be longer with this approach...

有关更多详细信息，请参见本文:

See this article for more details:

• 如何调试Angular2的TypeScript源代码: 查看全文