标签: requirejs-text

我今天下午一直在尝试使用Grunt和Require JS.我是该text模块的忠实粉丝并使用它来引入我的模板.在非基于Grunt的项目中,我使用了inlineText和stubModulesRequire JS选项来嵌入模板文件,它运行良好.但是,我在与Grunt合作时遇到了麻烦.

需要配置

require.config({
    paths: {
        // Using Bower for dependency management
        text: '../components/requirejs-text/text'
    }
});

用法

define(['text!template.html'], function (html) {
    // Do stuff with html
});

Gruntfile.js

requirejs: {
    dist: {
        options: {
            baseUrl: 'app/scripts',
            optimize: 'none',
            preserveLicenseComments: false,
            useStrict: true,
            wrap: true,
            inlineText: true,
            stubModules: ['text']
        }
    }
}

运行后,grunt我在控制台中收到各种错误:

• 找不到文件 /dist/components/requirejs-text/text.js
• 一个 Load timeout for modules: text!template.html_unnormalized2

那么两个问题:

• 它似乎没有内联(然后存根)text.js代码
• 它似乎没有内联template.html文件

任何想法为什么它不起作用？

我有一个项目,它利用多个require上下文和动态加载的jQuery版本和插件.(jQuery版本将集中采购,不会内联).主机和每个上下文的jQuery完整性以及插件隔离都很关键.

我正在为RequireJS编写一个加载器插件来处理以下用例:

• 在特定的需求上下文中
• 在不影响托管页面的fn或任何其他需要的上下文的情况下,我想:
  • 加载我需要的任何版本的jQuery
  • 将插件加载到我特定的jQuery版本的fn上
  • 在必需的jQuery版本上具有引用完整性,以便我的require上下文中的任何模块都可以共享插件

我有一个与测试的装载机为例项目在这里.

当我使用加载器进行第二次调用时,它在最后一个条件下失败,它正在吹走先前的版本.

我也使用eval将加载的插件中的$引用隔离到本地加载的jQuery版本范围.任何有关更好的方法的想法将不胜感激.

想要保持简单(愚蠢),如果有一个更简单/更清洁的解决方案.

非常感谢.

我正在使用TypeScript,Backbone和Mustache编写Web应用程序.我想使用Requirejs进行依赖加载.

我还使用了针对TypeScript的Web Essentials visual studio插件,并启用了AMD编译选项.对于那些不熟悉它的人,如果导入外部模块,它会将您的类型脚本文件包装在AMD模块中.例如:

在类型脚本中,我在类型定义文件中导入以下模块.

export import Backbone = module("Backbone"); 
import mainTemplate = module("MainTemplate");

输出类似于:

define(["require", "exports", "Backbone", "MainTemplate"], function(require, exports, __Backbone__, __mainTemplate__) {
//...code goes here ...
});

对于模板,我在类型定义文件中声明了以下内容:

declare module "MainTemplate" { }

为了支持requirejs插件,您需要将模块声明为:

declare module "text!MainTemplate.html" { }

我想保持模块名称没有插件和文件扩展名.这将使我在未来具有一定的灵活性.

我在require中有以下映射.

require.config({
    map: {
        "MyModule": {
            "MainTemplate": "text!MainTemplate.html"
        }
    }
}

这成功调用了文本插件,但插件加载了错误的url.通过筛选文本插件的源代码,我发现以下代码是罪魁祸首.

load: function (name, req, onLoad, config) {
  ...
  url = req.toUrl(nonStripName),
  //returns "scripts/**text!**MainTemplate.html**.html**"
  ...
}

如果我命名模块,'MainTemplate.html'它工作正常,但我想保留扩展模块名称.

我已经使用简单的正则表达式替换修改了文本插件,以去除插件引用和重复的扩展.

有没有更好的方法来处理这个？

我曾经使用RequireJS和Backbone,并使用requirejs/text和requirejs-plugins来加载我通常用于配置的本地json文件.

如何使用AngularJS实现相同的目标？

每个人似乎都建议使用$ http,但这是唯一的方法吗？如果我有20个配置文件,我真的需要拨打20个电话吗？

也许类似于ng-constant的东西是"首选"方式？

我想使用Grunt建立一个Durandal项目,因为Weyland完全没有文档记录,并不像Grunt那样标准.

为此,grunt任务需要在优化期间引入所有js和html文件,但我无法通过文本模块让RequireJS内联html文件.

看起来weyland 手动复制文本文件,但我无法弄清楚它是如何让requirejs(或杏仁,在这种情况下)实际使用它们.我已经看到了这个问题,但它需要在define调用中引用文本模块,这在Durandal中没有完成.

我的for gruntfile使用此配置

requirejs: {
            build: {
                options: {                  
                    name: '../lib/require/almond-custom', //to deploy with require.js, use the build's name here instead
                    insertRequire: ['main'], //needed for almond, not require
                    baseUrl: 'src/client/app',
                    out: 'build/main-built.js',
                    mainConfigFile: 'src/client/app/main.js', //needed for almond, not require
                    wrap: true, //needed for almond, not require
                    paths: {
                        'text': '../lib/require/text',
                        'durandal':'../lib/durandal/js',
                        'plugins' : '../lib/durandal/js/plugins',
                        'transitions' : '../lib/durandal/js/transitions',
                        'knockout': '../lib/knockout-2.3.0',
                        'bootstrap': '../lib/bootstrap.min',
                        'jquery': '../lib/jquery-1.9.1',
                        'Q' : '../lib/q.min'
                    },
                    inlineText: true,
                    optimize: 'none',
                    stubModules: …

我想用require.js从另一个域中获取一些html.我知道CORS政策不容易这样做.注意:到目前为止,我已经配置了Web服务器(使用Access-Control-Allow-Origin"*"和其他指令)和require.js,所有JS和CSS文件(带有require-css插件的css)都从其他域加载正如所料 - 只是获取HTML会产生问题.但是在浏览器网络协议中,我可以看到html内容甚至被加载.但是,此内容不会传递给require函数!浏览器获取内容,但require.js不提供它作为参数...

我的配置:

requirejs.config({
    baseUrl: "http://some.other.domain/",
    paths: {
        jquery:       'ext/jquery/jquery.min',
        htmlTemplate: 'test.html?', 
        siteCss:      '../css/site'
    },
    shim: {
        htmlTemplate: [
            'css!siteCss'
        ]
    },

    config: {
        text: {                
            useXhr: function (url, protocol, hostname, port) {
                return true;
            }
        }
    },
    map: {
        '*': {
            text: 'ext/require/text',
            css:  'ext/require/css.min'
        }
    }
});


require(['text!htmlTemplate'], function (htmlTemplate) {
    console.log(htmlTemplate); // prints 'undefined' into the console
});

两个注意事项:useXhr配置来自require.js文本插件将".js"添加到文件名中,但如果它存在与否则没有区别.我?在htmlTemplate路径中添加了一个.有了这个,.js没有附加到URL,浏览器加载html内容 - 如前所述,不幸的是,没有require.js将其传递给参数htmlTemplate …

我想用RequireJS加载一个html内容,如下所示:

define(function (require) {

"use strict";

return function (id) {
     var url = 'text!screens/' + id + '.html';
     var html = require(url);
}; });

但是我收到此错误: 错误:模块名称"text!screens/home.html_unnormalized2"尚未加载上下文:_

如果我以这种方式尝试:

define(function (require) {

"use strict";

return function () {
     var html = require('text!screens/home.html');
}; });

一切都好.但由于硬核提示网址,这种方法并不是很好.我怎么解决这个问题？

我一直在使用r.js来尝试缩小一个相当大的项目,我遇到了文本插件的问题.我正在使用node.js和一个如下构建文件:

构建文件

({

    name: '../main',

    baseUrl: '../../js/app',

    appDir: "./app",

    dir: 'build',

    paths: {

        jquery: '../lib/jquery/jquery-1.10.2.min',
        underscore: '../lib/underscore/underscore-min',
        backbone: '../lib/backbone/backbone-min',
        text: '../lib/require/text',
        picker: '../lib/pickadate/picker',
        pickerDate: '../lib/pickadate/picker.date',
        pickerLegacy: '../lib/pickadate/legacy'
    },

    mainConfigFile : '../js/main.js'

})

主配置文件

requirejs.config({

    baseUrl: 'js/app',

    paths: {

        jquery: '../lib/jquery/jquery-1.10.2.min',
        underscore: '../lib/underscore/underscore-min',
        backbone: '../lib/backbone/backbone-min',
        text: '../lib/require/text',
        picker: '../lib/pickadate/picker',
        pickerDate: '../lib/pickadate/picker.date',
        pickerLegacy: '../lib/pickadate/legacy'
    },

    shim: {
        picker: ['jquery', 'pickerLegacy'],
        pickerDate: {
            deps: ['jquery', 'picker'],
            exports: 'DatePicker'
        },
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        underscore: {
            exports: '_'
        },
        text …

我正在使用以下架构来处理基于multipages multipus的应用程序:https: //github.com/requirejs/example-multipage-shim

存储库解释了如何通过运行r.js(用于此类任务的命令行工具)来优化应用程序.

一切都应该工作正常,但我的项目作为一些模块,具有执行HTTP GET请求从服务器获取数据的依赖项(可以是text或json)

这是因为某些页面使用的某些jsons和模板需要在服务器端进行本地化处理.

这是一个显示我在说什么的基本示例:

 define( function( require ){

    var appLang = require('json!/pagelang/login'),           //(a)
        loginTemplate = require('text!/template/login'),     //(b)
        module = require('app/model/user'),                  //(c)
        ....

向我的服务器localhost/pagelang/login发出HTTP get请求,返回一个json

{
   "hash": "translated_value",
    ...
}     

这同样适用于template/template_name从服务器返回将其UI翻译成用户语言的html的地方.

通过运行r.js,它会尝试为服务器上的exirect目录目录加载这些位置,这显然不存在.

Tracing dependencies for: app/main/login
Error: Error: Loader plugin did not call the load callback in the build:
json:
  json!/pagelang/login: Error: ENOENT, no such file or directory '/pagelang/login'
Module loading did not complete for: app/main/login

所以,我想阻止命令行工具优化文本!和json!模块.可能吗？

我检查了requirejs构建设置,但我找不到解决问题的方法.有帮助吗？ https://github.com/jrburke/r.js/blob/master/build/example.build.js