Question

我正在编写我的第一个Electron / Angular / RequireJS单页桌面应用程序。我从electron-boilerplate开始，效果很好。但是，我需要将AngularJs添加到等式中 - 锅炉板已经使用RequireJS。我尝试了很多解决方案，但是我得到了错误，或者没有执行依赖项。所以我试图从之前的堆栈溢出问题“Simple requireJS with angularJS - angular is not defined”中实现这个简单的例子。但是，我看到的是文件正在被解析，但它从不执行内部代码。它几乎就像没有满足一个或多个依赖项，因此它们不会执行。我的文件如下 - 我添加了一些日志记录，因此我可以很容易地看到执行路径。

app.html - 包含RequireJS的起点。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Electron Boilerplate</title>
</head>
<body ng-app="ReqApp" ng-controller="GreetCtrl">

    <h1>{{greeting}}!</h1>
    <script data-main="require_config" src="vendor/require.js"></script>

</body>
</html>

require_config.js - 这包含RequireJS配置。

console.log("REQUIRE_CONFIG.JS-------------"+requirejs.version);    
requirejs.config({
    // alias libraries paths
  paths: {
    'domReady':      './vendor/requirejs-domready',
    'angular':       './node_modules/angular/angular',
    'GreetCtrl':     './js/GreetCtrl',
    'app':           './js/app'
  },
  // angular does not support AMD out of the box, put it in a shim
  shim: { 'angular': { exports: 'angular' }
  },
  // kick start application
  deps: ['./bootstrap']
});

bootstrap.js - 来自RequireJS deps的文件，以手动引导AngularJS。

console.log("BOOTSTRAP.JS1-------------");
define([
    'require',
    'angular',
    'app'
], function (require, ng, app) {
    'use strict';

    console.log("BOOTSTRAP.JS2+++++++++++++");
    require(['domReady!'], function (document) {
        console.log("BOOTSTRAP.JS+++++++++++++");
        ng.bootstrap(document, ['ReqApp']);
    });
});

./ js / app.js - 这会为应用程序初始化AngularJS模块。

console.log("APP.JS-------------"+requirejs.version);
define([
  'angular',
  'GreetCtrl'
], function (ng) {
  'use strict';

  console.log("APP.JS+++++++++++++");
  return ng.module('ReqApp', [ 'ReqApp.GreetCtrl' ]);
});

./ JS / GreetCtrl.js

console.log("GREETCTRL.JS1-------------");
define(['angular'], function(angular) {
    console.log("GREETCTRL.JS1+++++++++++++");
    angular.module( 'ReqApp.GreetCtrl', [])
    .controller( 'GreetCtrl', function GreetCtrl ($scope) {
         $scope.greeting = "Hello World";
    });
});

运行此示例的控制台输出是：

[16982:0917/115914:ERROR:browser_main_loop.cc(173)] Running without the SUID sandbox! See https://code.google.com/p/chromium/wiki/LinuxSUIDSandboxDevelopment for more information on developing with the sandbox on.
[17010:0917/115915:INFO:renderer_main.cc(200)] Renderer process started
[17014:0917/115915:INFO:renderer_main.cc(200)] Renderer process started
[16982:0917/115915:ERROR:browser_gpu_channel_host_factory.cc(146)] Failed to create channel.
[16982:0917/115915:INFO:CONSOLE(43)] "REQUIRE_CONFIG.JS-------------2.1.20", source: file:///home/swdev/projects/build/require_config.js (43)
[16982:0917/115915:INFO:CONSOLE(8)] "BOOTSTRAP.JS1-------------", source: file:///home/swdev/projects/build/bootstrap.js (8)

页面输出为：

{{greeting}}!

从输出中可以看出，似乎只解析了require_config.js和bootstrap.js文件，但是没有执行define中的代码。我的问题是：

为什么bootstrap.js函数从未被调用？
为什么app.js和GreetCtrl.js文件甚至都没有被解析？
由于Electron使用节点我必须使用requirejs，我是否需要从bootstrap.js中删除require的使用并将其替换为requirejs？注意：我已经测试过更改它，但它没有解决我的问题。
我注意到我所遵循的stack overflow example在HTML正文定义中定义了ng-app="ReqApp"。我有限的理解是，应该删除它，因为我们手动引导AngularJS。我的用例的正确方法是什么（选举（节点）/ RequireJS / AngularJS？注意：我已经通过从正文定义中删除定义进行测试，但它没有解决我的问题。

我花了几天时间尝试解决这个问题，所以任何帮助都会赞赏！

其他尝试：玩了一些以简化部分问题。我似乎无法让RequireJS执行或解析一些依赖项。我的简化是：

./ app.js

<!doctype html>
<html>
<head>
    <title>Electron Boilerplate</title>
</head>
<body >
    <script data-main="require_config" src="vendor/require.js"></script>
    <h1>Hello World!</h1>
</body>
</html>

./ require_config.js

console.log("REQUIRE_CONFIG.JS-------------"+requirejs.version);
requirejs.config({
    paths: {
    'app': './js/app'
  },
  // kick start application
  deps: ['./bootstrap']
});

./ bootstrap.js

console.log("BOOTSTRAP.JS1-------------");
define( ['app'], function (app) {
    'use strict';
    console.log("BOOTSTRAP.JS2+++++++++++++");
});

./ JS / app.js

console.log("APP.JS-------------");
define([], function () {
  'use strict';
  console.log("APP.JS+++++++++++++");
});

结果输出仍然与我上面的原始输出相同。处理boostrap.js和require_config.js。永远不会调用bootstrap.js define / function，也永远不会解析app.js。

Answer 1

contacting Electron boilerplate https://graph.facebook.com/me?access_token=%@&fields=email,name,gender,picture,birthday,relationship_status的开发人员之后我认为他让我直截了当。主要问题是我对样板的所有移动部件缺乏了解。当试图扩展样板时，我没有意识到/理解他的应用程序是使用ES6编写的，而ES6被转换为兼容的RequireJS格式。因此，我遇到的问题根本不在于RequireJS。我写的模块是RequireJS兼容的，然后被转发，这意味着RequireJS无法处理它们。

正确的方法是编写ES6模块，问题就消失了。黑客解决方法是使用符合RequieJS的语法添加模块，然后修改样板build.js copyFromAppDir以排除这些文件被转换。但同样，为了遵循样板的原始意图和设计，代码应该用ES6编写。

简单的RequireJS，AngularJS，Electron App，依赖性不执行

1 个答案: