使用r.js来优化和连接文件，以便作为库使用

Using r.js to optimize and concatenate files for use as a library

本文关键字：文件 js 优化 连接 使用      更新时间：2023-09-26

好吧，我刚刚进入一个项目，我有几个不同的模块写在AMD格式。我需要将这些javascript文件松散地关联到一个javascript文件中，然后将其引用为跨不同项目的另一个AMD模块(可能来自CDN)。

我面临的问题是，当我对这些文件运行rjs并将它们放入一个文件时，当我将该组合文件拉到另一个项目时，它只是被吐出未定义。

让你明白我在说什么

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);
}

words显示为undefined

只是将它们全部连接起来并不能做任何事情，因为这只是给了我一堆一个接一个的define语句。

我尝试创建一个带有

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

并通过rjs运行，但也没有成功。是我遗漏了什么，还是我要用非amd格式重写这些，以便我可以将它们连接在一起并返回一个巨大的对象?请记住，words.min.js将不得不托管在CDN上并缓存，因为它将在多个项目中共享，所以我需要将其作为单独的文件。

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

所以在开发中你可以使用像这样的

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'
  }
}

部分混乱在于这不是rjs优化器的主要用途。它似乎是为最终的网站开发人员而不是模块开发人员设计的。但是正如你在上面看到的，可以强制它进入那个模式。

相关文章：