如何在Require.js优化期间使用本地文件,但在运行时使用CDN托管的版本？

Question

我的页面包含几个作为单独的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加载'？

Answer 1

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

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