标签: requirejs

我正在使用requireJS 2.x. 我发现有些教程(和官方文档)有时会使用

requirejs.config({ [...] });
requirejs(["module"]) ...

而有时

require.config({ [...] });
require(["module"]) ...

这两个函数(require和requirejs)之间有什么区别吗？我在文档中找不到任何关于它的文字.:(

对于网络人来说,这可能是一个愚蠢的问题.但我对此感到有些困惑.现在,我有一个应用程序,我使用几个Javascript文件来执行不同的任务.现在,我正在使用Javascript 捆绑器来组合和缩小所有文件.因此,在运行时只有一个app.min.js文件.现在,Requirejs用于在运行时加载模块或文件.所以,问题是如果我已将所有内容都放在一个文件中,那么我是否需要requirejs？或者什么是用例场景我可以使用requirejs和/或bundler？

如果需要进一步的细节,请告诉我.

是否有可能通过WebJars使用我的应用程序中包含的Play 2.3应用程序concat/optimize JS(使用sbt-rjs)？
举一个具体的例子:我正在尝试创建一个core.js模块,其中包含在单个文件中连接和缩小的所有第三方库,然后可以将其指定为其他AMD模块的依赖项.
通过WebJars包含这些库而不是"手动"下载源会很棒.

这是我的build.sbt文件中的一个片段,我在其中指定了我的webjar依赖项:

// Webjars
libraryDependencies ++= Seq(
  "org.webjars" % "requirejs" % "2.1.15",
  "org.webjars" % "underscorejs" % "1.7.0",
  "org.webjars" % "jquery" % "1.11.1",
  "org.webjars" % "bootstrap" % "3.3.1" exclude("org.webjars", "jquery"),
  "org.webjars" % "angularjs" % "1.3.4-1" exclude("org.webjars", "jquery")
)

这是我的requireJS构建配置

requirejs.config({
  baseUrl: '/assets/javascripts',
  shim: {
    'jsRoutes': {
      deps: [],
      exports: 'jsRoutes'
    },
    'angular': {
      deps: ['jquery'],
      exports: 'angular'
    },
    'underscore': {
      exports: '_'
    },
    'angularRoute': ['angular'],
    'angularCookies': ['angular'],
    'bootstrap': ['jquery']
  },
  paths: {
    'requirejs': …

在玩了AMD/RequireJS后,我想知道加载包含模板和CSS的UI模块是否是一个好主意,这样它们就完全独立于网页.

这听起来不错,但我没有看到这在野外实施,所以可能存在陷阱.

想想一些具有以下结构的UI模块:

myWidget
    |--img 
    |--main.js
    |--styles.css
    +--template.tpl

一个文件夹中的所有内容.看起来很不错.

main.js中的模块看起来像这样:

define(["TemplateEngine", "text!myWidget/template.tpl"], function(TemplateEngine, template) {

    // Load CSS (Pseudo Code)
    var cssUrl = "myWidget/styles.css";
    appendToHead(cssUrl);

    return function() {
        return {
            render: function(data) {
                  return TemplateEngine.toHtml(template, data);
            } 
        }
    }
});

现在的问题是:

1. 我错过了什么吗？
2. 是否有任何插件/概念如何以"标准"方式实现？
3. RequireJS优化器是否能够在这里处理CSS部分,比如使用JS部件对样式表进行concat/minify处理？
4. 有什么意见吗？是好是坏？

最近,我开始使用reactjs连同backbonejs路由器来构建应用程序.

我通常requirejs用于依赖和代码管理.但是,当我尝试包含包含jsx语法的文件时出现问题.

到目前为止,这就是我的意思router.js:

define(["backbone", "react"], function(Backbone, React) {

  var IndexComponent = React.createClass({
    render : function() {
      return (
        <div>
        Some Stuff goes here
        </div>
        );
    }
  });



  return Backbone.Router.extend({
    routes : {
      "": "index"
    },
    index : function() {
      React.renderComponent(<IndexComponent />, document.getElementById('index'));
    }
  });
});

如何将IndexComponent放在自己的文件中并在此文件中调用它？我已经尝试了通常的方法(与我使用的主干和反应相同)但由于jsx语法而出错.

我刚刚开始使用Require.JS,我对它应该使用的适当情况以及在这些情况下使用它的正确方法有点不清楚.

以下是我目前使用Require.JS设置的方法.我有两个功能,functionA()和functionB().这两个功能都需要额外的功能functionC()才能正常工作.

我只想在必要时加载functionC(),即当要调用functionA()或functionB()时.所以我有以下文件:

functionC.js

functionC(){
  //do stuff
}

functionA.js

functionA(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionA() stuff
  });
}

functionB.js

functionB(){  
  define(['functionC'],function(){
    //functionC() is loaded because it is listed as a dependency, so we can proceed
    //do some functionB() stuff
  });
}

那么,这个设置是否正确？如果我最终在同一页面上同时调用functionA()和functionB(),是否因为它们都加载了functionC.js文件而进行了额外的工作？如果是这样,那是一个问题吗？如果是这样,有没有办法设置它,以便他们首先检查是否已经加载了functionC.js,并且只在尚未加载时加载它？最后,这是否适用于Require.JS？

我有许多JavaScript"类",每个类都在自己的JavaScript文件中实现.对于开发,这些文件是单独加载的,并且为了生产它们是连接的,但在这两种情况下我都必须手动定义加载顺序,确保B在A之后,如果B使用A.我计划使用RequireJS作为实现CommonJS Modules/AsynchronousDefinition自动为我解决这个问题.

有没有更好的方法来定义每个导出一个类的模块？如果没有,您如何命名模块导出的内容？导出类"Employee"的模块"employee",如下例所示,对我来说感觉不够干净.

define("employee", ["exports"], function(exports) {
    exports.Employee = function(first, last) {
        this.first = first;
        this.last = last;
    };
});

define("main", ["employee"], function (employee) {
    var john = new employee.Employee("John", "Smith");
});

我首先想说的是我是RequireJS的新手,甚至是Jasmine的新手.

我有一些SpecRunner的问题,需要JS.我一直在关注Uzi Kilon和Ben Nadel(以及其他一些人)的教程,他们帮助了一些,但我仍然遇到了一些问题.

看来,如果在测试中抛出错误(我可以想到一个特别是类型错误),将显示spec runner html.这告诉我,我在javascript中有一些问题.但是,在我修复这些错误后,不再显示HTML. 我根本无法让测试跑者显示出来.有人发现我的代码可能会导致此问题吗？

这是我的目录结构:

Root 
|-> lib
    |-> jasmine
        |-> lib (contains all of the jasmine lib)
        |-> spec
        |-> src
    |-> jquery (jquery js file)
    |-> require (require js file) 
index.html (spec runner) specRunner.js

这是SpecRunner(索引)HTML:

<!doctype html>
<html lang="en">
    <head>
        <title>Javascript Tests</title>

        <link rel="stylesheet" href="lib/jasmine/lib/jasmine.css">

        <script src="lib/jasmine/lib/jasmine.js"></script>
        <script src="lib/jasmine/lib/jasmine-html.js"></script>
        <script src="lib/jquery/jquery.js"></script>
        <script data-main="specRunner" src="lib/require/require.js"></script>

        <script>
            require({ paths: { spec: "lib/jasmine/spec" } }, [
                    // Pull in all your modules containing …

1.3.0 - 2012年1月11日从Underscore中移除了AMD(RequireJS)支持.如果您想将Underscore与RequireJS一起使用,您可以将其作为普通脚本加载,包装或修补您的副本,或下载分叉版本.

他们为什么要这样做？有人知道吗？因为他们仅在几个月前(10月)添加了它,并且据说 AMD(异步模块定义)远远优于CommonJS模块.

更新:截至2013年12月,再次受到支持.

我们正在使用Backbone,RequireJS和Handlebars构建一个非繁琐的Web应用程序,好吧,我只是很好奇.目前,我们的每个型号排序如下:

define(['Backbone', 'js/thing/a', 'js/thing/b', 'js/lib/bob'], function(a, b, bob) {
  return Backbone.Router.extend({
    // stuff here
  });
});

其中thing/a,thing/b都有自己的依赖关系,例如Handlebars模板等.现在发生的是在我的main.js中,所有"顶级"路由器都被加载并初始化; 每个顶级路由器都有一组依赖项(模型,视图等),每个依赖项都有自己的依赖项(模板,帮助程序,工具等).基本上,一个大树结构.

这种情况下的问题是整个树在页面加载时被解析并加载.我不介意每个人,因为我们最终将通过优化器运行它并最终得到一个大的单个文件(将RequireJS简化为基本上模块化框架).但是,我很好奇你是否可以按需加载视图和模板等内容.

还有就是"简化CommonJS的包裹解释说:" 在这里,所以我试过了:

define(function(require) {
  Backbone = require('Backbone');
  return Backbone.Router.extend({
    doStuff: function() {
      var MyView = require('js/myView');
      new MyView().render();
    }
  });
});

但是,看看Chrome的网络检查器,似乎RequireJS - 即使没有触发触发doStuff处理程序的路径 - 仍会加载myView依赖项.问题:

• 这有可能吗？RequireJS中是否有黑色魔法,它们在require()没有实际触发doStuff路线的情况下寻找呼叫？
• 这是理论上正确的"按需"方式,需要延迟加载RequireJS模块和资源吗？
• 如果使用这种表示法,r.js优化器是否仍然像宣传的那样工作？