内联require.js文本！使用Grunt

Question

我一直在用Grunt做实验，今天下午我需要JS。我非常喜欢text模块，并使用它来引入我的模板。在非基于Grunt的项目中，我使用了inlineText和stubModules需要JS选项来内联模板文件，而且效果很好。然而，我很难让这个和Grunt一起工作。

需要Config

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文件

知道为什么不行吗？

Answer 1

您会看到错误，因为您需要向r.js指示text模块在哪里。

您可以通过添加路径配置来做到这一点：

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

然后，您需要将text.js模块下载到适当的目录中。

但是为什么你的require.config不能工作呢？

因为r.js需要在某个时候对配置进行评估。您没有在问题中提到您的require.config在哪里，但是如果您想对其进行评估，则需要指出r.js的位置(参见https://github.com/jrburke/r.js/blob/master/build/example.build.js#L35)：

requirejs: {
    dist: {
        options: {
          baseUrl: 'app/scripts',
          optimize: 'none',
          preserveLicenseComments: false,
          useStrict: true,
          wrap: true,
          inlineText: true,
          stubModules: ['text'],
          mainConfigFile: '../config.js' // here is your require.config

          // Optionally you can use paths to override the configuration
          paths: {
             'text': 'libs/text' // relative to baseUrl
          }
       }
    }
}