Question

好的，我刚刚进入一个项目，我有几个不同的模块用AMD格式编写。我需要将这些松散相关的javascript文件放到一个javascript文件中，然后将其作为另一个不同项目的AMD模块（可能来自CDN）引用。

我面临的问题是，当我针对这些文件运行r.js并将它们放入一个文件时，当我将该组合文件拖到另一个项目中时，它只是以未定义的形式吐出。

了解我所谈论的内容

words.spelling.js

define(['jquery', 'some.other.class'], function($, foo){
...
}

words.grammar.js

define(['jquery', 'some.other.class'], function($, foo){
...
}

words.translation.js

define(['jquery', 'some.other.class'], function($, foo){
...
}

将r.js运行到 words.min.js

然后说我把它拉成 app.js 作为

require(['jquery', 'app/main/main', 'words.min'], function($, main, words) {
$(document).ready(function() {
    console.log(words);
}

单词只显示为未定义。

只是将它们连接在一起并没有做任何事情，因为它只是一个接一个地给我一堆定义语句。

我尝试创建一个有

的假类

define(['word.grammar', 'word.translation', 'word.spelling'], function( g, t, s){
    return {
      grammar: g,
      translation: t,
      spelling: s
    };
});

并通过r.js运行，但也没有骰子。我在这里遗漏了什么，或者我是否会以非AMD格式重新编写这些内容，以便将它们连接在一起并返回一个巨大的对象？请记住，words.min.js将必须托管在CDN上并进行缓存，因为它将在多个项目中共享，因此我需要将其作为单独的文件。

Answer 1

一种解决方案是使用路径配置将这些模块名称映射到其实际文件：

所以在开发中你使用这样的东西

require.config({
  paths: {
    'words.spelling': 'libs/words.spelling',
    'words.grammar': 'libs/words.grammar',
    'words.translation': 'libs/words.translation'
  }
}

您需要将相同的路径配置从开发传递到r.js优化器，以便它放在组合文件中的模块名称只有名称，而不是一些额外的路径信息。例如，您希望组合包中的模块名称为：'words.spelling'，而不是'some/other/path/words.spelling'

然后在另一个应用程序中使用组合版本，你可以这样做，将所有模块名称映射到同一个文件：

require.config({
  paths: {
    'words.spelling': 'libs/words.min',
    'words.grammar': 'libs/words.min',
    'words.translation': 'libs/words.min'
  }
}

部分原因是这不是r.js优化器的主要用途。它似乎是为最终网站开发人员而不是模块开发人员设计的。但是如上所述，可以将其强制转换为该模式。

使用r.js优化和连接文件以用作库

1 个答案: