如何包装用 RequireJS 加载的外部库？答案

【问题标题】：How to wrap external libraries loaded with RequireJS?如何包装用 RequireJS 加载的外部库？
【发布时间】：2014-02-20 13:04:04
【问题描述】：

我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前，我将所有内容捆绑到一个唯一的文件中。通常，外部库没有 requireJS 'define' 包装器。

例如，Angular Parallax 库是这样写的：

# https://github.com/durated/angular-parallax/blob/master/angular-parallax.min.js
angular.module("duParallax",["duScroll","duParallax.directive"...

这是我的 main.js：

require.config({
  baseUrl: '/angular-dev',
  paths: {
    angular: '//ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min',
    angularScroll: 'bower_components/angular-scroll/angular-scroll.min',
    angularParallax: 'bower_components/ng-parallax/angular-parallax.min'
  },
  shim: {
    'angular': { exports: 'angular' },
    'angularScroll': { deps: ['angular'] },
    'angularParallax': { deps: ['angular'] }
  }
});

我正在使用 grunt-contrib-requirejs 将所有库（不是 CDN 库）捆绑到一个唯一的文件中。这是我捆绑所有内容后得到的：

angular.module("duParallax",["duScroll","duParallax.directive"...
define("angularParallax", ["angular"], function(){});

但我期望的是 要在定义中包装的代码：

define("angularParallax", ["angular"], function(){
  angular.module("duParallax",["duScroll","duParallax.directive"...
});

如何在不更改库本身的情况下实现最新？

编辑： 根据this other stackoverflow question，这就是它应该如何工作。但我也在使用 grunt-contrib-requirejs 来捆绑我的代码，这可能是问题所在。

Shim from grunt-contrib-requirejs not wrapping library

【问题讨论】：

对不起'优先级'，这是我将删除的遗产。如您所见，Angular 是从 CDN 加载的，因此它没有捆绑在其他库中。这意味着在我生成的文件中，“angular”尚未定义，这就是为什么我希望它被包裹在“define”中，然后在“angular”可用时加载。
您添加的那一点“我正在使用 grunt-contrib-requirejs 来捆绑所有库”非常清楚地说明了这个问题，所以我收回我的评论。是的，它没有做它应该做的事情。不幸的是，我没有使用这个工具，所以我不知道你必须做什么。
感谢您的帮助，希望对其他人澄清！

标签： requirejs

【解决方案1】：

默认情况下，r.js 不会包装非 AMD 兼容库。您需要在 grunt-requirejs-contrib 设置中添加以下选项：

wrapShim: true

【讨论】：