标签: requirejs

我希望能够选择性地定义模块,然后在我的代码中使用或不使用它.我正在考虑的特殊情况是在调试/测试环境中加载模拟/存根模块,但不是在我上线时.这是一个例子:

在html文件中,可以选择加载js文件(伪代码):

//index.cshtml
...
<script src="/Scripts/lib/require.js"></script>
<script src="/Scripts/app/service_user.js"></script>
<script src="/Scripts/app/real_service.js"></script>
#if DEBUG
<script src="/Scripts/app/mock_service.js"></script>
#endif

在上面,必须在调试版本中加载real_service和mock_service.

每个模块都将使用requirejs定义,例如:

//mock_service.js
define('mock_service', [], 
    function () {
        ...
    });

//real_service.js
define('real_service', [], 
    function () {
        ...
    });

然后在使用该服务时,我想检查是否已经定义了mock_service:

//service_user.js
define(['require', 'real_service'], 
    function (require, real_service) {
        if (require.isDefined('mock_service')) { // 'isDefined' is what I wish was available
             var mock = require('mock_service');
             mock.init(real_service);
        }

        ...
    });

所以我的名义'isDefined'函数只会检查一个已定义给定名称(或名称？)的模块.然后在我的代码中,如果它被定义,我可以要求它并使用它.如果没有,那也没关系.

对我来说重要的是没有尝试加载可选模块.我可以尝试/捕获require语句,但这会导致尝试从服务器加载它,我不希望这样.

另一个选择是有一个我总是加载的存根定义,所以总是需要一个模拟,然后我可以询问它是否是真实的,但这似乎也是浪费.

require.js是否有任何一个深入到require.js,他们发现他们需要这个功能并制定了实施策略？

罗先生,提前谢谢你

在我们的项目中,我们使用RequireJS作为模块加载器.我们的一些模块会影响全局库,因此不会直接在它们被引用的模块中使用.

例:

define(['definitely/goingto/usethis/','just/referencingthis/forpackaging'], function(useThis) {
    useThis.likeIPromised();

    // the following call can only be made when the second required file is available
    someGlobalAvailableVariable.someMethod();
});

在JavaScript中编写模块时,这可以正常工作.但是,我们正在逐步将项目翻译为TypeScript.鉴于上面的示例,这会导致:

import useThis = module("definitely/goingto/usethis/");
import whatever = module("just/referencingthis/forpackaging");

useThis.likeIPromised();

// I've written a definition file so the following statement will evaluate
someGlobalAvailableVariable.someMethod();

在将其编译为JavaScript时,编译器希望对您有所帮助,并删除任何未使用的导入.因此,这会破坏我的代码,导致第二个导入的模块不可用.

我目前的工作是包括一个冗余的任务,但这看起来很难看:

import whatever = module("just/referencingthis/forpackaging");
var a = whatever; // a is never ever used further down this module

有谁知道是否有可能将TypeScript编译器配置为在编译期间不优化模块？

我是从一个"老"浏览器风格的模块结构改变一个项目,一个"新"浏览器的或 - 服务器端JavaScript的模块结构require.js.

在客户端我使用的是异地托管的jQuery,所以我从他们在README 的"use priority config"技术中给出的示例开始:

<title>My Page</title>
<script src="scripts/require.js"></script>
<script>
require({
    baseUrl: 'scripts',
    paths: {
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min',
        jqueryui: ...,
        ...
        ... // bunch more paths here
    },
    priority: ['jquery']
}, [ 'main' ]);
</script>

这实际上是正常的.但我想将功能从main导出到HTML网页本身.例如:

<a class="button" href="#" onclick="MyApi.foo();">
    <img src="foo.png" alt="foo" />Click for: <b>Foo!</b>
</a>

在适应AMD模块模式之前,我通过在全局空间中创建字典对象来从我的各种文件中公开功能:

// main.js

var MyApi = {};

jQuery(document).ready(function($) {
    // ...unexported code goes here...

    // export function via MyApi
    MyApi.foo = function() {
        alert("Foo!");
    };
}); …

有没有人有任何经验或知道在ASP.NET MVC项目中捆绑和缩小像RequireJS/AMD这样的模块化JavaScript的好解决方案？

是使用RequireJS优化器的最佳方式(也许是在后期构建操作中？) - 或者ASP.NET MVC有哪些更好的东西？

我目前正在学习RequireJS基础知识,并对构建配置文件,主文件以及RequireJS与多页项目的使用有一些疑问.

我项目的目录结构如下:

httpdocs_siteroot/
    app/
        php files...
    media/
        css/
            css files...
        js/
            libs/
                jquery.js
                require.js
                mustache.js
            mains/
                main.page1.js
                main.page2.js
                main.page3.js
            plugins/
                jquery.plugin1.js
                jquery.plugin2.js
                jquery.plugin3.js
            utils/
                util1.js
                util2.js
        images/

由于这个项目不是单页应用程序,因此每个页面都有一个单独的主文件(尽管有些页面使用相同的主文件).

我的问题是:

1. RequireJS是否适用于非单页项目？

2. 在不使用优化器的情况下,我的每个主文件都以基本相同的配置选项开头:

   requirejs.config({
     paths: {
       'jquery': 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min'
     },
     baseUrl: '/media/js/',
     // etc...
   });
   require(['deps'], function() { /* main code */ });
   

   Run Code Online (Sandbox Code Playgroud)

   有办法避免这种情况吗？就像让每个主文件包含相同的构建配置文件而不必实际构建它一样？

3. r.js应该进入httpdocs_siteroot父目录吗？

4. 我的app目录结构或我使用RequireJS有什么明显的错误吗？

我可以在开发中使用Require.js而不使用该data-main属性加载到我的初始脚本中吗？即.<script data-main="scripts/main" src="scripts/require.js"></script>我发现在我的开发环境中使用这个属性很困难.

我一直在使用requireJS构建单页应用程序,并且到目前为止还爱它.我已经开始在主应用程序之外开发网站的其他部分,并且我不确定如何(或是否)使用requireJS.

在我的主应用程序中,所有内容都由此脚本标记触发:

<script data-main='/scripts/main' src='/scripts/libs/require.js'>

我现在正在开发主页,它有自己的前端脚本.在获取站点时使用优化器将所有这些脚本捆绑到一个main.js包中.我很难理解我的网站的其他部分适合这个.

假设我的应用程序依赖于jQuery,并且它被捆绑在应用程序的优化版本中,如果我想在主页上使用jQuery怎么办？我不想加载我的应用程序main.js只是为了访问我的jQuery模块.所以是的...有点困惑!

我想象的网站结构有点像这样:

/scripts
  - app-main.js //(includes all module dependencies after optimzation)
  - home-main.js //(includes all module dependencies after optimzation)

应用程序:

<script data-main='/scripts/app-main' src='/scripts/libs/require.js'>

主页:

<script data-main='/scripts/home-main' src='/scripts/libs/require.js'>

问题

1. 如何使用RequireJS开发网站的不同部分？
2. 是否建议有多个main.js文件？
3. 我的不同main.js文件如何共享jQuery post optimization等常用模块？

我正在尝试使用RequireJS 2.0.1.我的目标是正确加载jQuery,Underscore和Backbone.从最初的RequireJS文档中我发现作者J. Burke(在这个新版本中)添加了一个名为shim的新配置选项.

然后我在这里写下这些东西:

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Testing time</title>
        <script data-main="scripts/main" src="scripts/require.js"></script>
    </head>
    <body>
        <h1>Testing time</h1>
    </body>
</html>

scripts/main.js

requirejs.config({
    shim: {
        'libs/jquery': {
            exports: '$'
        },
        'libs/underscore': {
            exports: '_'
        },
        'libs/backbone': {
            deps: ['libs/underscore', 'libs/jquery'],
            exports: 'Backbone'
        }
    }
});


define(
    ['libs/jquery', 'libs/underscore', 'libs/backbone'],

    function (jQueryLocal, underscoreLocal, backboneLocal) {
        console.log('local', jQueryLocal);
        console.log('local', underscoreLocal);
        console.log('local', backboneLocal);
        console.log('global', $);
        console.log('global', _);
        console.log('global', Backbone);
    }
);

一切似乎工作得很好,但我觉得我缺少一些东西,我知道有jed和Underscore的AMD版本,但如果设置如此简单,我不明白为什么我应该使用它们.

那么,这个设置是正确的还是我错过了什么？

我是RequireJS的新手.我在Knockout.js中编写了许多自定义绑定,并希望使用模块将它们拆分.

我目前的代码布局是:

/
  default.html
  js
    code.js
    require-config.js 
    lib
      /require.js
      bridge
        bridge.js
        bindings1.js
        bindings2.js
        bindings3.js

我想从default.html加载bridge.js并在所有绑定文件中加载.我尝试使用require函数使用或内联js加载bridge.js.

我的require-config非常简单:

require.config({
    baseUrl: '/'
});

在bridge.js中,我在使用相对路径加载文件时遇到问题.我试过了:

require(['./bindings1', './bindings2', './bindings3'], function () {
    console.log('loaded');
});

但这只是最终使用路径baseUrl +'bindings1.js',例如.我在bridge.js中尝试了各种迭代.我唯一的成功就是如果我写完整条道路:

require(['js/bridge/bindings1', 'js/bridge/bindings2', 'js/bridge/bindings3'], function () {
    console.log('loaded');
});

但这不是我想要的.这似乎是一个非常基本的用例,我想我可能会误解相对路径是如何工作的.

谢谢

虽然requirejs能够使用安装了npm的模块,但requirejs如果通过它自己安装,我该如何在第一时间使用npm install requirejs？

我已经阅读了示例部分中requirejs列出的使用示例.他们似乎都假设require.js已下载到特定位置.由于文件具体说

不要做像需要的东西("./ node_modules/foo/foo").

我想这样做是不对的index.html:

<html>
    <head>
        <script data-main="scripts" src="node_modules/requirejs/require.js"></script>
    </head>
    <body>
        <h1>Hello World</h1>
    </body>
</html>

如果是npm-installed,建议使用requirejs的方法是什么？如果我遗漏了文档中的内容,请告诉我.谢谢