电子文件已加载但未显示在“网络”选项卡中答案

【问题标题】：Electron file loaded but not showing in Network tab电子文件已加载但未显示在“网络”选项卡中
【发布时间】：2016-09-21 16:17:40
【问题描述】：

我已经用电子打包了我的应用程序：

asar pack my-app app.asar

my-app 是我的应用程序的文件夹。

在 index.html 我有以下标签：

<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<script src="node_modules/d3/d3.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script>
    //configure system loader
    System.config({defaultJSExtensions: true});
</script>
<script src="node_modules/angular2/bundles/angular2.js"></script>
<script src="node_modules/angular2/bundles/http.min.js"></script>
<script>
    //bootstrap the Angular2 application
    System.import('dist/hello').catch(console.log.bind(console));
</script>

在 Electron 浏览器的 Source 部分，我可以看到所有这些文件连同它们的内容一起加载。在“网络”选项卡中，我看不到这些文件，但我只看到在 Angular 应用程序中加载的文件（导入语句）。

I see the main screen of my app, but in the console I see an exception:
EXCEPTION: Error in ./HelloApp class HelloApp - inline template:16:64
ORIGINAL EXCEPTION: ReferenceError: d3 is not defined

使用

asar 列表 app.asar

我可以看到所有文件都在那里。

应用程序在此文件上失败my.component.ts

import {Component, Input, ElementRef, AfterViewInit} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser';
import {CrossSellOppty} from './cross-sell-oppty';

declare var d3: any;

@Component({
    selector: 'histogram',
    template: `
      <div>
        <svg class="chart">
        </svg>
      </div>
    ` }) export class HistogramComponent {   ...

    ngOnChanges (changes) {
      ...
      if (changes.hasOwnProperty("histogramData")) {
        d3.select(...)
      }
    } }

它像d3.select(...) 线一样失败。
您知道什么会导致此问题吗？

【问题讨论】：

标签： d3.js angular dependencies electron

【解决方案1】：

我猜d3 会尝试检测它加载的环境类型（浏览器或节点），如果它认为它在浏览器中，只会设置d3 全局。在启用了 Node 集成的 Electron 窗口中，它可能假定它应该像 CommonJS 模块一样工作，并期望用户通过 require 或其他一些模块加载器加载它。

您可以导入/要求 d3 而不是通过 script src 加载它，例如

<script>
  var d3 = require('d3')
</script>

尽管在您的情况下您可能需要使用System.import 而不是require。

Electron FAQ 中介绍了其他选项。

【讨论】：