简单的RequireJS，AngularJS，电子应用，不依赖的依赖
我正在撰写我的第一个Electron / Angular / RequireJS单页桌面应用程序。 我从电子样板开始，效果很好。 但是，我需要添加AngularJs – 锅炉板已经使用RequireJS。 我已经尝试了一些解决scheme，但是我要么得到错误，要么依赖没有被执行。 所以我试图从前面的堆栈溢出问题的简单例子，“ 简单requireJS与angularJS – angular度未定义 ”。 但是，我所看到的是文件正在被parsing，但它从不执行内部的代码。 这几乎就像一个或多个依赖没有得到满足，所以他们不执行。 我的文件如下 – 我已经添加了一些日志，所以我可以很容易地看到执行path。
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 – 包含RequireJSconfiguration。
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的文件可以手动引导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文件被parsing，但是定义中的代码并没有被执行。 我的问题是：
- 为什么bootstrap.js函数永远不会被调用？
- 为什么app.js和GreetCtrl.js文件甚至没有被parsing？
- 由于电子使用节点，我必须使用
requirejs，我需要从bootstrap.js删除我的使用require并将其replace为requirejs以及？ 注：我已经testing改变这个，但它没有为我的问题。 - 我注意到，我遵循的堆栈溢出示例在HTML主体定义中定义了
ng-app="ReqApp"。 我有限的理解是，这应该被删除，因为我们手动引导AngularJS。 什么是正确的方法为我的用例（选举（节点）/ RequireJS / AngularJS？注意：我已经通过从主体定义中删除定义进行testing，并没有为我的问题。
我花了几天试图解决这个问题，所以任何帮助将不胜感激！
额外的尝试：玩了更多的简化问题的一部分。 我似乎无法得到RequireJS执行或parsing一些依赖项。 我的简化是：
./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定义/函数永远不会被调用，app.js永远不会被parsing。
在联系 电子样板的开发人员之后，我认为他把我定了下来。 主要问题是我对样板的所有移动部件都不了解。 当试图扩展样板文件时，我并没有意识到/理解他的应用程序是使用ES6编写的，这个ES6被转换成兼容的RequireJS格式。 因此，我所遇到的问题根本不在于RequireJS。 我写的模块是RequireJS兼容的，然后被转换，这意味着RequireJS无法处理它们。
正确的做法是编写ES6模块，问题就消失了。 黑客的解决方法是使用RequieJS兼容语法添加您的模块，然后修改boilerplate build.js copyFromAppDir以排除这些文件被转发。 但是，要遵循样板的原意和devise，代码应该用ES6编写。