带有文本文件的 r.js

Question

我在 http://gifcept.com 有一个使用 require.js 的项目。我正在使用 r.js 优化资源，但是当我设置 inlineText: true 时，我无法让它工作。

我有以下目录树用于使用 r.js 进行测试

└── uncompiled
    ├── js
    │   ├── bookmarklet
    │   ├── collections
    │   ├── libs
    │   │   ├── backbone
    │   │   ├── jquery
    │   │   ├── jquery.fileupload
    │   │   ├── jquery.iframe-transport
    │   │   ├── jquery.jscrollpane
    │   │   ├── jquery.mousewheel
    │   │   ├── jquery.scrolltofixed
    │   │   ├── jquery.simple-dialog
    │   │   ├── jquery.tag-it
    │   │   ├── jquery.timeago
    │   │   ├── jquery.ui
    │   │   ├── modernizr
    │   │   ├── require
    │   │   └── underscore
    │   ├── models
    │   └── views
    └── templates

我的 build.js 文件如下所示

({
    dir: "compiled",
    baseUrl: "uncompiled/js",        
    stubModules: ['text'],
    findNestedDependencies: true,
    preserveLicenseComments: false,
    optimizeAllPluginResources: true,
    removeCombined: true,
    optimize: "uglify",
    inlineText: true,
    modules: [
        {
            name: "main"
        }
    ],
    paths: {
        jquery: 'libs/jquery/jquery-2.0.0',
        underscore: 'libs/underscore/underscore-1.4.4',
        backbone: 'libs/backbone/backbone-1.0.0',
        modernizr: 'libs/modernizr/modernizr-2.6.2',
        jqueryui: 'libs/jquery.ui/jquery.ui-1.10.3',
        jquerytagit: 'libs/jquery.tag-it/jquery.tag-it-2.0',
        jqueryiframetransport: 'libs/jquery.iframe-transport/jquery.iframe-transport-1.7',
        jqueryfileupload: 'libs/jquery.fileupload/jquery.fileupload-5.31.6',
        jquerysimpledialog: 'libs/jquery.simple-dialog/jquery.simple-dialog-0.0.1',
        jqueryscrolltofixed: 'libs/jquery.scrolltofixed/jquery.scrolltofixed',
        jquerytimeago: 'libs/jquery.timeago/jquery.timeago-1.3.0',
        jquerymousewheel: 'libs/jquery.mousewheel/jquery.mousewheel',
        jqueryjscrollpane: 'libs/jquery.jscrollpane/jquery.jscrollpane'
    },
})

我的 main.js 文件看起来像这样

require.config({ 
    baseUrl: "/js",
    paths: { 
        jquery: 'libs/jquery/jquery-2.0.0',
        underscore: 'libs/underscore/underscore-1.4.4',
        backbone: 'libs/backbone/backbone-1.0.0',
        modernizr: 'libs/modernizr/modernizr-2.6.2',
        jqueryui: 'libs/jquery.ui/jquery.ui-1.10.3',
        jquerytagit: 'libs/jquery.tag-it/jquery.tag-it-2.0',
        jqueryiframetransport: 'libs/jquery.iframe-transport/jquery.iframe-transport-1.7',
        jqueryfileupload: 'libs/jquery.fileupload/jquery.fileupload-5.31.6',
        jquerysimpledialog: 'libs/jquery.simple-dialog/jquery.simple-dialog-0.0.1',
        jqueryscrolltofixed: 'libs/jquery.scrolltofixed/jquery.scrolltofixed',
        jquerytimeago: 'libs/jquery.timeago/jquery.timeago-1.3.0',
        jquerymousewheel: 'libs/jquery.mousewheel/jquery.mousewheel',
        jqueryjscrollpane: 'libs/jquery.jscrollpane/jquery.jscrollpane'
    },
    shim: {
        jquery: {
            exports: '$'
        },
        underscore: {
            exports: '_'
        },
        backbone: {
            exports: 'Backbone',
            deps: ['underscore', 'jquery']
        },
        modernizr: {},
        jqueryui: {
            deps: ['jquery']
        },
        jquerytagit: {
            deps: ['jquery', 'jqueryui']
        },
        jqueryiframetransport: {
            deps: ['jquery']
        },
        jqueryfileupload: {
            deps: ['jquery', 'jqueryui']
        },
        jquerysimpledialog: {
            deps: ['jquery']
        },
        jqueryscrolltofixed: {
            deps: ['jquery'],
        },
        jquerytimeago: {
            deps: ['jquery'],
        },
        jquerymousewheel: {
            deps: ['jquery'],
        },
        jqueryjscrollpane: {
            deps: ['jquery', 'jquerymousewheel'],
        }
    }
}); 

require([ 
    // Load our app module and pass it to our definition function 
    'app',          
    'events',
    'modernizr',
    'jquery',
    'jqueryscrolltofixed',
    'jqueryui',
    'jquerytagit',          
    'jquerysimpledialog',
    'jqueryiframetransport',
    'jqueryfileupload',
    'jquerytimeago',
    'jquerymousewheel',
    'jqueryjscrollpane'
], function(Application, Events){
...
...
});

使用文本资源的定义示例是

define([
    'underscore',
    'backbone',
    'helpers',
    'events',
    'router',
    'views/destroyableView',
    'text!/templates/comment.html'
], function(_, Backbone, Helpers, Events, Router, DestroyableView, CommentTemplate){
...
...
});

我已经能够在 build.js 中将 inlineText: false 转换为 false 并摆脱 'text!*' 定义的编译文件。当 inlineText 设置为 true 并且我保留文本资源定义时，我得到的错误如下：

Tracing dependencies for: main
RangeError: Maximum call stack size exceeded
In module tree:
    main
      app
        views/appView
          views/menuView
            views/notificationCollectionView
              views/notificationView
                views/viewGifPopupView
                  views/commentCollectionView
                    views/commentView
                      text

Error: RangeError: Maximum call stack size exceeded
In module tree:
    main
      app
        views/appView
          views/menuView
            views/notificationCollectionView
              views/notificationView
                views/viewGifPopupView
                  views/commentCollectionView
                    views/commentView
                      text

任何帮助将不胜感激。

Answer 1

我唯一能做的就是提供一个小的工作示例：

ma​​in.js

require.config({
    paths : {
        jquery : 'jquery-2.0.3',
        backbone: 'backbone',
        underscore: 'underscore'
    },
    shim : {
        underscore: {exports: '_'},
        backbone: {deps: ['underscore'], exports: 'Backbone'}
    },
    map : {
        '*' : {
            'text' : 'text' // real path tot text.js plugin
        }
    }
});

require(['jquery', 'backbone', 'text!./partials/view.html'], function($, Backbone, view) {
    console.log('Type of $: ' + typeof $);
    console.log('Type of Backbone: ' + typeof Backbone);
    var element = $(view);
    $('body').append(element);
});

index-prod.html

<!doctype html>
<html>
    <head></head>
    <body>
        <script src="require.js"></script>
        <script src="main-built.js"></script>
    </body>
</html>

build.js

({
   baseUrl : ".",
   name : 'main',
   mainConfigFile : "main.js",
   out : "main-built.js",
   findNestedDependencies : true,
   inlineText : true,
   stubModules: ['text'],
   preserveLicenseComments: false,
   optimizeAllPluginResources: true,
   removeCombined: true,
   optimize: "uglify",
})

index.html

<!doctype html>
<html>
    <head></head>
    <body>
        <script data-main="main" src="require.js"></script>
    </body>
</html>

partials/view.html

<div>Some view</div>

构建过程没有错误，文本资源内联在 main-built.js 中