“的fancybox”全球jQuery插件与JSPM/System.js实现为模块：

Question

我有“的fancybox”工作作为一个模块，在那里我可以导入import fancybox from 'fancybox';主要应用JS文件中。但是我无法工作的是'助手'js文件，它扩展了主要fancybox功能的功能。

JSPM的package.json覆盖部分出口“的fancybox”从主“的源极/ jquery.fancybox.pack.js”文件的功能。那么它应该由助手文件扩展。

{ 
    "jspm": { 
    "configFile": "config.js", 
    "dependencies": { 
     "fancybox": "bower:fancybox@^2.1.5", 
    }, 
    "overrides": { 
     "bower:fancybox@2.1.5": { 
     "main": "source/jquery.fancybox.pack.js", 
     "format": "global", 
     "files": [ 
      "source/jquery.fancybox.pack.js", 
      "source/helpers/jquery.fancybox-buttons.js", 
      "source/helpers/jquery.fancybox-media.js", 
      "source/helpers/jquery.fancybox-thumbs.js" 
     ], 
     "shim": { 
      "source/jquery.fancybox.pack.js": { 
      "deps": [ 
       "jquery" 
      ], 
      "exports": "fancybox" 
      }, 
      "source/helpers/jquery.fancybox-buttons.js": { 
      "deps": [ 
       "jquery" 
      ], 
      "exports": "*" 
      }, 
      "source/helpers/jquery.fancybox-media.js": { 
      "deps": [ 
       "jquery" 
      ], 
      "exports": "*" 
      }, 
      "source/helpers/jquery.fancybox-thumbs.js": { 
      "deps": [ 
       "jquery" 
      ], 
      "exports": "*" 
      } 
     } 
     } 
    } 
    } 
} 

主要应用entery点main.js：

import jquery from 'jquery'; 
import fancybox from 'fancybox'; 

jquery(document).ready(function() { 
    /* 
    * Simple image gallery. Uses default settings 
    */ 
    if (typeof jquery('.fancybox').fancybox !== 'undefined') { 
      // the variable is defined 

      jquery('.fancybox').fancybox(); 

      /* 
      * Different effects 
      */ 

      // Change title type, overlay closing speed 
      jquery(".fancybox-effects-a").fancybox({ 
       helpers: { 
        title : { 
         type : 'outside' 
        }, 
        overlay : { 
         speedOut : 0 
        } 
       } 
      }); 

// ..... & other helpers and configurations. 

      /* 
      * Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked 
      */ 
      jquery('.fancybox-thumbs').fancybox({ 
       prevEffect : 'none', 
       nextEffect : 'none', 

       closeBtn : false, 
       arrows : false, 
       nextClick : true, 

       helpers : { 
        thumbs : { 
         width : 50, 
         height : 50 
        } 
       } 
      }); 
} }); 

我不知道如何将佣工的主要功能结合起来。由于

• JSPM覆盖发电机：http://jarreddebeer.github.io/jspm-package-override-generator/public/
• 的fancybox回购：https://github.com/fancyapps/fancyBox &文档：http://fancyapps.com/fancybox/#docs
• JSPM注册表文件：https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm & http://jspm.io/0.17-beta-guide/overrides.html
• System.js全局格式https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#globals

Answer 1

我已经安装了最新的测试版JSPM 0.17 ... 然后我跟着这个版本的文档，有很多试验和错误，最后这似乎满足了我的要求。在JSPM创建的包特定文件filename@version.json中，我已将其更改为以下代码。然后安装JSPM，导致它被保存在package.json中。之后，可以将该包导入该页面，即，导入'fancybox;没有任何出口。

{ 
    "main": "source/helpers/jquery.fancybox-thumbs.js", 
    "format": "global", 
    "meta": { 
    "source/jquery.fancybox.pack.js": { 
     "deps": [ 
     "./helpers/jquery.fancybox-thumbs.css!", 
     "./helpers/jquery.fancybox-buttons.css!", 
     "./jquery.fancybox.css!" 
     ], 
     "format": "global", 
     "globals": { 
     "jQuery": "jquery" 
     } 
    }, 
    "source/helpers/jquery.fancybox-buttons.js": { 
     "format": "global", 
     "globals": { 
     "jQuery": "jquery", 
     "fancybox": "../jquery.fancybox.pack.js" 
     } 
    }, 
    "source/helpers/jquery.fancybox-media.js": { 
     "format": "global", 
     "globals": { 
     "fancybox": "./jquery.fancybox-buttons.js" 
     } 
    }, 
    "source/helpers/jquery.fancybox-thumbs.js": { 
     "format": "global", 
     "globals": { 
     "fancybox": "./jquery.fancybox-media.js" 
     } 
    } 
    }, 
    "map": {} 
}