内联require.js的文字! 使用咕噜(Inlining require.js text!

2019-08-20 04:21发布

我一直在尝试与咕噜今天下午要求JS。 我是一个大风扇的text模块,并用它在我的模板带来。 在基于非咕噜项目,我使用的inlineTextstubModules要求JS选项在线模板文件,它的伟大工程。 但是,我无法得到这个与咕噜工作。

需要配置

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我在控制台中的各种错误:

  • A文件未找到上/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/斑点/主/建造/ 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
          }
       }
    }
}


文章来源: Inlining require.js text! using Grunt