使用 RequireJS 文本插件

Question

我正在使用 Karma 运行测试一些代码。

在被 Karma 运行之前，测试和代码都被转译（ES6 => ES5 使用 babel）。

效果很好，测试运行很好。

但是如果我尝试使用任何正在测试的文件中的 text! 插件...

import template from 'text!./template.html';

...我得到：

There is no timestamp for /base/src/text.js!
Uncaught Error: Script error for "text", needed by: text!app/template.html_unnormalized2
http://requirejs.org/docs/errors.html#scripterror 
Uncaught Error: Load timeout for modules: text!app/template.html_unnormalized2

有人知道为什么会这样吗？

dist 文件夹中的构建工件（即被测项目）包含成功编码的文本 RequireJS 项目，例如：

define('text!app/template.html',[],function () { return '<div>foo</div>';});

附加信息

测试-main.js

var TEST_REGEXP = /(spec|test)\.js$/i;
var allTestFiles = [];   
Object.keys(window.__karma__.files).forEach(function(file) {
  if (TEST_REGEXP.test(file)) {
    var normalizedTestModule = file.replace(/^\/base\/|\.js$/g, '');
    allTestFiles.push(normalizedTestModule);
  }
});

require.config({
  baseUrl: '/base/src',
  paths: {},    
  shim: {},
  deps: allTestFiles,
  callback: window.__karma__.start
});

karma.conf.js

module.exports = function(config) {
    'use strict';    
    var path = require('path');    
    var cdn = 'http://localhost:55635/modules/';
    var basePath = path.dirname(__filename);

    config.set({
        basePath: '../../..',
        frameworks: [
            'requirejs', 
            'jasmine'
        ],
        files: [
            {
                pattern: path.join(basePath, 'test-transpiled', '*-spec.js'),
                included: false
            },
            path.join(basePath, 'dist', 'artifacts', 'app.js'),
            path.join(basePath, 'test', 'unit', 'test-main.js')
        ],
        proxies: {
            '/cdn/': cdn
        },
        exclude: [],
        preprocessors: {},
        reporters: ['dots'],
        colors: true,
        autoWatch: false,
        singleRun: false,
        browsers: ['Chrome'],
    });
};

编辑：

我已将以下内容添加到 karma.conf.js：

files: [
  {
    pattern: path.join(basePath, 'node_modules/require-plugins/text/text.js'),
    included: false
  },
   // ...
],

我在运行进行测试时继续遇到错误：

There is no timestamp for /base/src/text.js!

大概是因为我需要将 "text" 添加到 test-main.js?

的路径部分

require.config({
  baseUrl: '/base/src',
  paths: {
    'text': '../node_modules/require-plugins/text/text'
  },
  // ...
});

但是我已经尝试了 baseUrl 和 text 路径中的路径的各种组合，但我无法让它停止 404-ing。

Answer 1

您在 karma.conf.js 中的 files 选项不包括 text 插件，这就是为什么您会收到没有时间戳的错误消息。

向您的 files 列表中添加一个项目，该项目会命中您文件系统上的 text 插件，并确保您有 included: false 它。 RequireJS 插件就像其他模块一样：RequireJS 必须能够加载它们才能使用它们。

您可能还需要在 test-main.js 中设置 paths，具体取决于您放置插件的位置。 RequireJS 已经在 /base/src/text.js 寻找它。如果您找到它以便插件在此 URL 处提供服务，则无需设置 paths。如果你把它放在别的地方，那么你确实需要设置paths。类似于：

paths: {
  text: 'path/to/text',
}

请记住，paths 中的路径是相对于您的 baseUrl 设置进行解释的。

Answer 2

我尝试使用 require.js 文本！插件，还发现它与为项目其余部分定义的 baseUrl 冲突。

requirejs.config 将 baseUrl 设置为 JS 文件的父目录，而我的模板定义在 js 的同级目录中。无法告诉 requirejs 从 /base/templates 加载模板，从 base/js.

加载 js

我的解决方案是更改 text.js 插件，并在 ajax 调用获取 HTML 文件之前添加一个钩子来更改 url .你可以从 here.

中获取我的 text.js 版本

使用 RequireJS 文本插件

Using the RequireJS text plugin

javascript

text

requirejs

karma-runner