"Fancybox" 以 JSPM / System.js 作为模块的全局 jQuery 插件实现：

Question

我 'Fancybox' 作为一个模块工作，我可以在主应用程序 JS 文件中导入它 import fancybox from 'fancybox';。但是我无法开始工作的是 'helper' js 文件，它扩展了主要 fancybox 函数的功能。

覆盖部分中的

JSPM Package.json 从主 'source/jquery.fancybox.pack.js' 文件导出 'fancybox' 函数。然后它应该由帮助文件扩展。

{
  "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": "*"
          }
        }
      }
    }
  }
}

主应用程序入口点 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
                     }
                 }
             });
 } });

我不确定如何将 helpers 与 main 函数结合起来。谢谢

JSPM 覆盖生成器：http://jarreddebeer.github.io/jspm-package-override-generator/public/
Fancybox 回购：https://github.com/fancyapps/fancyBox & Docs: 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 中。之后可以将包导入页面，即 import '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": {}
}

"Fancybox" 以 JSPM / System.js 作为模块的全局 jQuery 插件实现：

"Fancybox" Global jQuery plugin implementation with JSPM / System.js as module:

jquery

shim

fancybox

systemjs

jspm