4

我有 3 个我使用的 JS 库，它们位于它们自己的单独文件中。它们用每个单独文件中缩小的代码进行注释

file 1: http://jsfiddle.net/NGMVa/

file 2: http://jsfiddle.net/AzEME/

file 3: http://jsfiddle.net/qVkhn/

现在他们单独在我的应用程序中工作正常，不要抛出任何错误。但我想加载更少的文件，所以我将它们组合成一个文件，如下所示：http: //jsfiddle.net/Gxswy/

但是，在 Chrome 中，它会在文件的最后一行引发错误：

Uncaught TypeError: undefined is not a function

然后它就不再起作用了。在合并它们之前我没有更改代码中的任何内容，我只是将前 3 个文件的内容复制并粘贴到新的文件中，它不再起作用了。不明白为什么将它们组合到一个文件中似乎会破坏功能

希望有人知道这里发生了什么？

4

2 回答 2

6

确保在每个文件的末尾添加分号或连接，然后 minify 和 minifier 应该注意这一点。

试试这个代码：https ://gist.github.com/elclanrs/4728677

于 2013-02-07T04:57:53.707 回答
0

原因

就我而言，这是因为我在requirejs's中为已经支持 AMD 加载shim的库 ( ) 指定了依赖项。perfect-scrollbar结果是它的整个代码在完成其工作define后被绕过。grunt-contrib-requirejs

基本上，将 requirejs 文件连接在一起，grunt-contrib-requirejs将

// change this:
define(['d3'],function(d3){...});

// into this:
define('d3', ['d3'],function(d3){...});

而在里面perfect-scrollbar，已经有了

(function (factory) {
  'use strict';

  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.

    define(['jquery'], factory); // <-------------------------- this part
    // after minification would become:
    // define('PerfectScrollbar', ['jquery'], factory);

  } else if (typeof exports === 'object') {
    factory(require('jquery')); // Node/CommonJS
  } else {
    factory(jQuery); // Browser globals
  }
}(function ($) {
  // perfect-scrollbar code here...
});

这与我在中指定的内容相冲突shim：

shim: {
    "PerfectScrollbar": ['jquery', 'jquery.mousewheel']
}

因此，当requirejs到达PerfectScrollbar真正定义的部分时，它会跳过它，假设它已经完成了这项工作。

解决方案

不要shim为已经支持 AMD 的库指定依赖项。

问题

但是如果我需要指定依赖项怎么办？我需要在它的代码中已经指定的jquery.mousewheel之上。jquery

回答

要求该文件具有适当的要求，并正确获取其自身的依赖项：

define(['perfect-scrollbar', 'jquery.mousewheel'], function(){...});

当您需要的库支持 AMD 时，

// inside jquery.mousewheel:
require(['jquery'], factory);

或者它没有

shim: {
    "IDontSupportAMD": ['jquery']
}
于 2014-09-19T05:28:18.927 回答