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

主应用程序entery point 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 repo：https://github.com/fancyapps/fancyBox＆amp;文档：http://fancyapps.com/fancybox/#docs
JSPM注册文档：https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm＆amp; 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中。之后可以将包导入页面，即导入＆＃39; 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插件实现：

1 个答案: