使用 RequireJS 文本插件答案

【问题标题】：Using the RequireJS text plugin使用 RequireJS 文本插件
【发布时间】：2017-03-16 04:30:52
【问题描述】：

我正在使用 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>';});

其他信息

test-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!

大概是因为我需要在 test-main.js 的路径部分添加“文本”？

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

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

【问题讨论】：

标签： javascript text requirejs karma-runner

【解决方案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 设置进行解释的。

【讨论】：

我是否也需要在test-main.js 中向paths 添加项目？ ('text': '...')
插件位于node_modules/require-plugins/text/text.js。但是，我不确定如何从 test-main 中成功地引用它。我尝试过的所有 404s。
运行 karma 时，该模块在 http://localhost:9876/basesandbox/dev/app/node_modules/require-plugins/text/text.js 可用（使用浏览器验证）。但我不知道如何让 require （或 karma ）在那里寻找它。我的应用程序代码位于/c/sandbox/dev/app 下。不确定这是否有助于上述 URL 的 basesandbox/dev/ 位。
您应该尝试使用绝对路径text: '/basesandbox/dev/app/node_modules/requi‌re-plugins/text/text‌' 看看它是否能解决问题。有时很难想象各个部分是如何结合在一起的。
它适用于硬编码的绝对路径。怀疑这会在其他机器上中断 - 例如构建机器，所以我很想知道如何使用相对路径。

【解决方案2】：

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

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

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

【讨论】：