Question

我使用电子打包我的应用程序：

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部分中，我可以看到所有这些文件与其内容一起加载。在“网络”选项卡中，我没有看到这些文件，但我只看到角度应用程序（import语句）中加载的文件。

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 list 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(...)行一样失败。
你知道什么会导致这个问题吗？

Answer 1

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

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

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

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

Electron FAQ中包含其他选项。

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

1 个答案: