Question

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

这里变得棘手。我为module loader plugin编写了一个名为rvc.js的Ractive.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加载＆＃39;？

Answer 1

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

找出你不想捆绑的加载器和库
添加一个onBuildWrite函数，根据库重写模块，以便他们认为他们完全需要其他东西 - 在这种情况下Ractive_RUNTIME
在运行时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'
  }
});

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

1 个答案: