5

我的页面包含多个作为独立 AMD 模块存在的组件。这些组件中的每一个都由 Require.js 优化器转换为单个文件。因为其中一些组件共享依赖项（例如 jQuery 和 d3），所以优化器paths配置使用 CDN URL 来处理这些依赖项，而不是将它们捆绑到优化文件中。

这就是棘手的地方。我为Ractive.js编写了一个名为 rvc.js 的模块加载器插件，它允许我包含在 HTML 文件中定义的 Ractive 组件。（是的，我正在寻求有关如何使用我自己的库的帮助。）

这工作正常 - 像这样的代码得到优化，如你所料：

define( function ( require ) {
  var ChartView = require( 'rvc!views/Chart' );
  var view = new ChartView({ el: 'chart' });
});

因为 Ractive 被多个组件使用，它应该由像 jQuery 和 d3 这样的 CDN 提供。但它在优化过程中被 rvc.js 使用，这意味着Ractive优化器paths配置的条目不能指向 CDN - 它必须指向本地文件。

有没有办法告诉 Require.js '在优化期间使用本地文件，但在运行时从 CDN 加载'？

4

1 回答 1

4

所以这是我最终确定的解决方案。感觉有点笨拙，但它有效：

  1. 存根你不想捆绑的加载器和库
  2. 添加一个onBuildWrite根据库重写模块的函数，以便他们认为他们完全需要其他东西 - 在这种情况下Ractive_RUNTIME
  3. 向您的运行时 AMD 配置对象添加一个条目paths，以便Ractive_RUNTIME指向 CDN

我的优化器配置现在看起来像这样：

{
  baseUrl: 'path/to/js/',
  out: 'build/js/app.js',
  name: 'app',
  optimize: 'none',

  paths: {
    'amd-loader': 'loaders/amd-loader',
    'rvc': 'loaders/rvc',
    'Ractive': 'lib/Ractive'
  },

  stubModules: [ 'amd-loader', 'rvc', 'Ractive' ],

  onBuildWrite: function ( name, path, contents ) {
    if ( contents === "define('Ractive',{});" ) {
      // this is the stub module, we can kill it
      return '';
    }

    // otherwise all references to `Ractive` need replacing
    return contents.replace( /['"]Ractive['"]/g, '"Ractive_RUNTIME"' );
  }
}

同时，加载优化器创建的 app.js 文件的脚本有一个指向 CDN 的配置条目：

require.config({
  context: uniqueContext,
  baseUrl: baseUrl,

  paths: {
    'amd-loader': 'loaders/amd-loader',
    'rvc': 'loaders/rvc',
    'Ractive': 'lib/Ractive',
    'Ractive_RUNTIME': 'http://cdn.ractivejs.org/releases/0.3.9/Ractive.min'
  }
});
于 2014-03-03T19:37:02.693 回答