我有一个遗留应用程序,我已将部分应用程序重构为单独的backbone.marionette应用程序.我没有时间或预算来重构整个事情,我希望我的代码更容易管理,这让我想起了requirejs.
大多数文件都是缩小的并且在一起.
我可以将requirejs用于这种类型的混合解决方案,在那里我可以处理单独的主干模块并仍然可以访问现有的javascript吗？
我有以下requireJS配置.当试图引用包/ ImagingX模块时,我总是得到未定义,即使我可以看到脚本已经加载到firebug中.如果我将有问题的js文件移动到baseUrl目录并删除package /它按预期工作.
我究竟做错了什么？
window.requirejs.config(
{
baseUrl: '/Scripts',
paths: {
"jquery": "./jquery-1.7.1.min",
"jqx": "/Content/Plugins/jqWidgets",
"package" : "/Scripts/packages"
},
urlArgs: "bust=" + (new Date()).getTime(),
shim : {
'jqx/jqxcore': ['jquery'],
'jqx/jqxsplitter': ['jquery','jqx/jqxcore']
}
}
);
window.require(['jquery', 'layoutManager', 'container', 'package/ImagingX'],
function ($,lm,container,px) {
px.Focus();
$(document).ready(function () {
lm.Init(); // Sets up panes
container.Init(); //Set up the containers
});
});
更新15/10/2012
我现在急需解决这个问题,我已经把所有内容都删回了基础,所以这里是新的主文件:
(function () {
requirejs.config({
paths: {
"packages": "packages"
}
});
require([
'packages/testmodule'
],
function (tm) {
alert(tm);
});
})();
以及名为packages的子文件夹中的模块.
define('testmodule',
function …假设我想将jquery与一个标准的,非amd启用的jquery插件一起使用,该插件已经使用标准闭包定义:(function($))( $.fn.myplugin = { ... } )(jQuery);并且它都位于一个js/libs/jquery/jquery.myplugin.js.
我用这个配置:
require.config({
baseUrl: 'js/',
paths: {
'jquery': 'libs/jquery/jquery-noconflict',
'underscore': 'libs/underscore/underscore',
'backbone': 'libs/backbone/backbone',
'jquery-myplugin': 'libs/jquery/jquery.myplugin'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jquery-myplugin': {
deps: ['jquery']
}
});
我在无冲突模式下加载jQuery,因为libs/jquery/jquery-noconflict.js我不想污染全局命名空间:
define(['libs/jquery'], function () {
return jQuery.noConflict(true);
});
这就是我加载我的主app.js的方式:
define([
'jquery',
'underscore',
'backbone',
'jquery-myplugin'],
function($, _, Backbone, MyPlugin){
//MyPlugin is always undefined, not even sure if
//I should be passing it here if it only extends …我显然缺少一些概念/理解,绝大多数是javascript OO基础知识!
我喜欢使用RequireJS,现在我的网络应用程序看起来更像是一个结构化的应用程序,而不是一堆疯狂的代码.
我正在努力了解如何/如果可能的话.
我有一个模块作为基础数据服务模块,名为dataservice_base,如下所示:
define(['dataservices/dataservice'], function (dataservice) {
// Private: Route URL
this.route = '/api/route-not-set/';
var setRoute = function (setRoute) {
this.route = setRoute;
return;
}
// Private: Return route with/without id
var routeUrl = function (route, id) {
console.log('** Setting route to: ' + route);
return route + (id || "")
}
// Private: Returns all entities for given route
getAllEntities = function (callbacks) {
return dataservice.ajaxRequest('get', routeUrl())
.done(callbacks.success)
.fail(callbacks.error)
};
getEntitiesById = function (id, callbacks) …我一直在写一个angularjs应用程序,我有一些控制器,我已经放在1 JS文件中.我希望有一些更模块化的东西,并将我的控制器分成自己的文件.
我想到了RequireJS,但这是推荐的方式吗？或者angularjs是否提供了其他内容以及任何解释位置的线索？
也有所有这些文件进行调试是伟大的,但一旦生产建设需要确实angularJS提供某种合并的模块为1个文件,结果最小化？
如果有人能解释最好的方法,那将是非常有帮助的.
谢谢
我在这里遵循多页垫片共享模式:https: //github.com/requirejs/example-multipage-shim
我使用相同的common.js并且设置非常相似且简单:
<script src="js/library/requirejs/require.min.js"></script>
<script>
require(['./js/config/common'], function (common) {
//go on...
});
</script>
一切都很好,我可以继续在require闭包内运行操作,但我一直在Firefox中抱怨错误,抱怨匿名的define()模块与上面的代码不匹配.鉴于它是多么简单,而且我正在按照示例模式进行操作,我有点困惑,为什么我得到它.我没有在任何地方使用define().requireJS中的某些内容在过去24天内发生了变化(因为多页git repo已更新)？
我想使用gulp来构建JavaScript文件包.
例如,我的项目中有以下结构:
供应商包括(1-2),本地包括(3-4)和捆绑文件(5-6).
供应商包括只是与bower或composer一起安装的第三方JavaScript库.它们可以是CommonJS,AMD或者只是一个普通的jQuery插件.
我想在bundle文件中指定依赖关系,如下所示:
(function() {
// Vendor includes.
include('vendor1');
include('vendor2');
// Local includes.
include('includes/include1.js');
include('includes/include2.js');
// Some code here.
})();
我希望gulp处理这个源文件并创建一个最终的分发文件(bundle),确保所有依赖项(包括)在一个文件中合并在一起.所以我可以从我的HTML中包含foo.js,所有依赖项都可以使用.
我希望有一个清晰而强大的系统来管理项目中的所有依赖项并构建分发文件.
我的团队和我有一个AngularJS应用程序,它不使用RequireJS,而是在使用RequireJS 的现有站点的上下文中加载.在构建过程中,我将所有脚本缩小/连接成一个JS文件,其中包含某些供应商库,如Lodash,Moment等.
运行与父隔离的站点很好,但在父应用程序的上下文中,我得到了记录良好的错误:
Uncaught Error: Mismatched anonymous define() module: function () { return _; }
我没有父应用程序的控制权,有没有办法在运行时 "禁用"RequireJS或将其配置为忽略我的脚本？
我们当前的解决方案是修改供应商库并删除AMD代码,但这是不受欢迎的,因为我们使用Bower(使用grunt-bower-install)并且希望自动更新依赖项而不是依赖于手动流程和自定义hacks .
格式化JavaScript模块的方法有很多种:AMD,CommonJS,UMD,ES6,全局脚本.我已经看到了以他们想要的方式构建源代码的项目,并运行构建过程来生成包含所有上述格式的代码的dist目录.这具有以下优点:代码的用户可以选择最适合其环境的格式.
只要模块与其他模块没有依赖关系,此方法就可以正常工作.在模块必须导入其他模块的情况下,存在隐含的复杂性.例如,RequireJS使用的配置文件如下所示:
requirejs.config({
paths: {
'jquery': 'js/lib/jquery',
'ember': 'js/lib/ember',
'handlebars': 'js/lib/handlebars',
'underscore': 'js/lib/underscore'
}
});
其他加载器具有映射导入路径的等效机制.
如果jQuery是依赖项,模块是否应该从路径'jquery'导入它？如果它所包含的系统将jQuery存储在路径'libs/jquery'中会怎么样？在这种情况下,包含jQuery的系统的作者是否有责任在导入路径的配置中提供别名？
这种质疑强烈建议真正可重用的模块必须提供以所有模块格式格式化的代码,并清楚地记录它所依赖的库(及其版本),并记录假定存在这些库的导入路径.
例如,我可以创作一个花哨的jQuery插件,我在AMD,CommonJS,ES6和全球变体中分发.我会记录这个插件依赖于通过路径'jquery_on_a_path_that_confuses_you'导入的jQuery 2.0版.该插件的潜在用户必须将插件复制到他的项目中,然后配置他的模块加载器或构建工具以在路径'jquery_on_a_path_that_confuses_you'中导出jQuery.
据我所知:
是否有任何处理这种奇怪安排的计划？对我而言,让模块系统不知道如何命名模块似乎有点疯狂.我错了吗？
根据文件
通过了解您的代码,可以在项目文件夹中的CommonJS和AMD模块之间实现IntelliSense.
有没有人有关于如何使其工作的更多信息？我已经尝试将以下内容添加到我的工作区settings.json文件中,但没有快乐.
"javascript.validate.module": "amd"
谢谢
amd ×10
requirejs ×8
javascript ×6
angularjs ×2
commonjs ×2
backbone.js ×1
browserify ×1
gulp ×1
intellisense ×1
module ×1