我将使用Ruby on Rails 3.2启动一个富客户端Web应用程序.我打算使用RequireJS,但它似乎与Asset Pipeline发生冲突.据我所知,有什么后者基本上没有被串联相关资产,minifiying和压缩它们(纠正我,如果我错了),这似乎并不与装载JavaScript文件异步地非常兼容.
乍一看,资产管道似乎有更好的表现.但是,RequireJS允许您在模块中组织JavaScript代码,易于重用并管理其依赖项.
有没有办法将两者结合起来？如果没有,你会选择哪一个？
救命!
我是超级迷茫的家伙......我不知道我在做什么
昨天和今天我一直在关注RequireJS和AMD教程和示例,并且到了这一点,但是我认为我仍然对模块是什么有一个根本的误解.
我使用的是Node v0.10.12
<html>
...
<head>
<script data-main="" src="libraries/require.js"></script>
...
<script>
...
//I really need all these javascript files for every function defined on this page...
require(['simulatorConfiguration.js',
'modelConfiguration.js',
'libraries/jquery-1.10.2.min.js',
'libraries/jquery.lightbox_me.js',
'libraries/jquery-migrate-1.2.1.js',
'libraries/raphael-min.js'], function(start) {
$(function() {
loadPage(); //<--- CALL LOAD PAGE, but it can't find the function
//do some jquery stuff
});
});
//function that get's called on body onload!
define('loadPage', function loadPage()
{
hideAllDivs();
//more …我好像撞墙了,我无法分解.我正在使用angular + typescript,并希望使用requirejs.定义了多个角度应用程序,这些应用程序依赖于正文上的data-app-name属性进行加载.
文件夹结构(简化):
|- Libs
|- angular
|- some-plugin
|- angular-some-plugin // Exposes an angular.module("ngSomePlugin")
|- require.js
|- Common
|- Common.ts // Exposes an angular.module("common")
|- App1
|- Controllers
|- SomeController.ts
|- SomeOtherController.ts
|- Services
|- SomeService.ts
|- Main.ts
|- App.ts
|- App2
// same as above
|- AppX
// same as above
|- Index.html
|- Main.ts
内容:
index.html的:
// All these attributes are set dynamically server-side
<body id="ng-app-wrapper" data-directory="App1" data-app-name="MyApp">
<script src="Libs/require.js" data-main="Main"></script>
</body>
Main.ts:
console.log("Step 1: Main.js"); …我确信我在这里遗漏了一些完全无足轻重的东西,但是对于它的生命我无法弄明白.直到最近我才开始使用AMD(RequireJS).我的应用程序将(将)在浏览器中运行.
在打字稿1.8,这是可能的,以tsc采用AMD当外部模块组成成一个单一的输出文件的整个项目.
出于这个原因,我最终决定抛弃内部模块并将我的所有VS2015项目.ts和.tsx文件外部模块,然后使用以下编译器参数将它们编译为单个文件:
--module AMD --outFile main.js
该单如预期的那样创建输出main.js文件,列出了它是这是该项目组成部分的所有模块:
main.js
define("Project/MainModule", ["require", "exports" ...], function (require, exports ...) {
"use strict";
console.log("MainModule defined");
// ...
});
...
现在,我如何Project/MainModule运行 - 例如 - index.html(以便将"MainModule定义"记录到控制台中)？我加载了RequireJS来处理AMD语法,以及为立即加载指定的main.js文件:
的index.html
<script data-main="main" src="Require.js"></script>
这正确加载main.js,我通过console.log在该文件中的大量定义列表(外部模块)之后包含一个调用来确保.请原谅我,如果这是一个微不足道的问题,我找不到任何关于如何使用这种方法的编译应用程序(可能我没有使用正确的关键字？).
编辑:我尝试按名称要求模块:
的index.html
<script>
window.onload = function () {
require(["Project/MainModule"], function () {
// this
});
}
</script>
......但这并不好,RequireJS无法找到该模块.
我有一个我想要包含在Require.js链中的模块.(更具体地说:https://github.com/component/emitter)
在浏览器上我得到:
uncaught reference error: module is not defined
对于模块导出,它定义:
module.exports = Emitter;
我猜这叫做AMD/Node方式.如果错误,请更正.
在任何情况下,我都希望require.js能够以某种方式在浏览器中进行模块化.我认为Require.js的声明性填充选项可以帮助我,但我仍然看到上面的错误.
如果不手动修补模块,如何解决这个问题呢？(因为我想保持我设置的自动构建过程)
我有一个模块,它返回一个由JSON数据和图像对象组成的数组.因为加载JSON(来自其他文件)和图像对象都需要时间,所以我需要我的模块只在完成两次后才返回数组.
目前,模块总是在其他模块中返回'undefined',我相信这是因为模块没有等待像我期望的那样返回(但我不确定).或者,因为使用此Atlas模块的其他模块在返回任何内容之前将其声明为变量.
编辑以显示我如何定义/要求模块 *再次编辑以显示更多代码*
这是我的tile-atlas模块:
define( function() {
var tilesheetPaths = [
"tilesheets/ground.json",
"tilesheets/ground-collision.json",
"tilesheets/objects-collision.json"
];
var tileAtlas = [ ];
function loadAtlasJSON() {
for (var i = 0; i < tilesheetPaths.length; i++) {
loadJSON(
{
fileName: tilesheetPaths[ i ],
success: function( atlas ) {
addToTileAtlas( atlas );
}
}
);
}
};
function addToTileAtlas( atlas ) {
atlas.loaded = false;
var img = new Image();
img.onload = function() {
atlas.loaded = true;
};
img.src = atlas.src;
// …我使用的是TypeScript版本1.0.1.0
当同时使用TypeScript和AMD模块时,我应该在哪里编写"use strict"语句？它应该高于还是低于进口？
我可以在导入上面写它,以便这个TypeScript代码:
"use strict";
import Backbone = require('backbone');
class MyClass extends Backbone.View<Backbone.Model> { }
export = MyClass;
使用该文件顶部的语句生成此JavaScript:
"use strict";
var __extends = this.__extends || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
define(["require", "exports", 'backbone'], function(require, exports, Backbone) {
var MyClass = (function (_super) {
__extends(MyClass, _super);
function MyClass() { _super.apply(this, arguments); }
return MyClass;
})(Backbone.View); …我在一个大项目中使用requirejs.该项目很快将升级为angular2.
Angular2使用system.js,所以我也想切换到system.js.我是否应该能够删除对requirejs库的引用并包含system.js并期望它可以工作,或者是否有一些我在这里不理解的东西？
我尝试删除require.js文件并添加system.js文件,但我收到错误消息,说明定义未定义.你能帮我吗？除了system.js,我还需要require.js吗？
我的Backbone应用程序有一个名为schedule的视图,我对成功和错误调用正确函数的区别有点困惑,我尝试了下面列出的两个可能但我没有什么区别和什么是正确的从外部视图中放置的路由器调用函数的方法:
第一种方式:
require([
'app/collections/schedule',
'app/views/schedule'
], function(ScheduleCollection, ScheduleView) {
var scheduleCollection = new ScheduleCollection(),
scheduleView = new ScheduleView({
model: scheduleCollection
});
scheduleCollection.fetch({
reset: true,
success: function(){
scheduleView.successHandler();
},
error: function(){
scheduleView.errorHandler()
}
});
});
第二种方式
require([
'app/collections/schedule',
'app/views/schedule'
], function(ScheduleCollection, ScheduleView) {
var scheduleCollection = new ScheduleCollection(),
scheduleView = new ScheduleView({
model: scheduleCollection
});
scheduleCollection.fetch({
reset: true,
success: scheduleView.successHandler(),
error: scheduleView.errorHandler()
});
});
在scheduleView中
successHandler: function(){
console.log('success');
}
erroHandler: function(){
console.log('error');
}
我想定义一个typescript接口来表示一个错误.像这样的东西:
enum MessageLevel {
Unknown,
Fatal,
Critical,
Error,
Warning,
Info,
Debug
}
interface IMyMessage {
name: string;
level: MessageLevel;
message: string;
}
这样可以正常工作.但是,现在(也许)我想在.d.ts文件中声明该接口,以便其他人可以使用它进行输入.但我不想在.d.ts文件中定义枚举,因为那将是实现而不是简单的输入信息.枚举应该在.ts文件中,我们称之为messageLevel.ts:
///<amd-module name='MessageLevel'/>
export enum MessageLevel {
Unknown,
Fatal,
Critical,
Error,
Warning,
Info,
Debug
}
此时我可以通过这种方式在我的d.ts打字文件中使用它:
import * as ml from "./MessageLevel";
interface IMyMessage {
name: string;
level: ml.MessageLevel;
message: string;
}
我可以使这项工作,但我不喜欢将实现文件导入打字文件的级别混合.我也不喜欢在打字文件中实际实现枚举的想法.
是否有一种干净的方法来保持实施和声明严格分开？
amd ×10
requirejs ×7
javascript ×4
typescript ×4
angular ×1
backbone.js ×1
jquery ×1
js-amd ×1
json ×1
systemjs ×1