Question

我使用的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个文件的内容复制并粘贴到新文件中，它不再起作用了。不明白为什么将它们合并到一个文件似乎打破了功能

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

Answer 1

确保在每个文件的末尾添加分号或连接，然后缩小和缩小器应该处理。

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

Answer 2

原因

就我而言，这是因为我在requirejs＆＃39; s shim中为已经支持AMD加载的库（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的部分时，它跳过它，假设它已经完成了工作。

解决方案

不要为已经拥有AMD支持的库在shim中指定依赖关系。

问题

但是，如果我需要指定依赖项呢？我需要jquery.mousewheel在其代码中已经指定的jquery之上。

答案

要求该文件具有正确的require，并获得自己的依赖项：

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

当你需要的库有AMD支持时，

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

或者它没有

shim: {
    "IDontSupportAMD": ['jquery']
}

合并在一个文件中时，缩小的Javascript不起作用

2 个答案:

原因

解决方案

问题

答案