Question

我收到以下错误。

toastr.js:60 Uncaught (in promise) TypeError: $ is not a function
    at getContainer (toastr.js:60)
    at notify (toastr.js:215)
    at r.error (toastr.js:49)

但是JQuery已经加载，所以我不明白发生了什么。

更新

我开始明白发生了什么。

我在我的文件夹中编辑了以下文件：project/jspm_packages\npm\toastr@2.1.2\toastr.js

特别是@围绕第470行：https://github.com/CodeSeven/toastr/blob/1ef00d723691b563b610077a08539391386826b3/toastr.js#L470

我评论了旧代码并添加了以下内容：

}(typeof define === 'function' && define.amd ? define : function (deps, factory) {

    /*if (typeof module !== 'undefined' && module.exports) { //Node
        module.exports = factory(require('jquery'));
    } else {
        window.toastr = factory(window.jQuery);
    }*/

    window.toastr = factory(window.jQuery);
    module.exports = factory(window.jQuery);

}));

我觉得require('jquery')命令导致了对位于dist/jquery.js的文件的获取请求

但是，此文件不存在，因此同事创建了一个空文件。这修复了其他错误，但似乎toastr受到影响。我不是JS专家，但似乎require函数可能正在创建jquery的本地范围版本（基于dist/js文件），然后将此引用传递给构造函数/工厂toastr。

问题

我的问题是toastr中的require是在dist中寻找一个不存在的jquery文件。有没有办法创建一个以预期格式返回现有JQuery的包装器文件？

我认为包装器需要采用AMD格式......

package.json内容

  {
      "name": "mbak-ui",
      "version": "0.5.0",
      "description": "mbak",
      "keywords": [
        "mbak"       
      ],
      "main": "dist/main.js",
      "repository": {
        "type": "git",
        "url": "https://MYREPO"
      },
      "scripts": {
        "test": "gulp test",
        "e2e": "gulp serve webdriver-standalone e2e"
      },
      "devDependencies": {
        "aurelia-bundler": "^0.4.0",
        "aurelia-protractor-plugin": "^1.0.0",
        "aurelia-tools": "^1.0.0",
        "babel-core": "^6.18.2",
        "babel-eslint": "^7.1.0",
        "babel-plugin-istanbul": "^2.0.3",
        "babel-plugin-syntax-flow": "^6.18.0",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-plugin-transform-flow-strip-types": "^6.18.0",
        "babel-preset-es2015": "^6.18.0",
        "babel-preset-stage-1": "^6.16.0",
        "browser-sync": "^2.17.5",
        "conventional-changelog": "1.1.0",
        "del": "^2.2.2",
        "gulp": "^3.9.1",
        "gulp-babel": "^6.1.2",
        "gulp-bump": "^2.5.0",
        "gulp-changed": "^1.3.2",
        "gulp-eslint": "^3.0.1",
        "gulp-htmlmin": "^3.0.0",
        "gulp-notify": "^2.2.0",
        "gulp-plumber": "^1.1.0",
        "gulp-protractor": "3.0.0",
        "gulp-sourcemaps": "^2.2.0",
        "http-proxy-middleware": "^0.17.4",
        "jasmine-core": "^2.5.2",
        "karma": "^1.3.0",
        "karma-babel-preprocessor": "^6.0.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-coverage": "^1.1.1",
        "karma-jasmine": "^1.0.2",
        "karma-jspm": "2.2.0",
        "merge-stream": "^1.0.1",
        "object.assign": "^4.0.4",
        "protractor": "^4.0.10",
        "proxy-middleware": "^0.15.0",
        "require-dir": "^0.3.2",
        "requireg": "^0.1.7",
        "run-sequence": "^1.2.2",
        "vinyl-paths": "^2.1.0",
        "yargs": "^6.3.0"
      },
      "jspm": {
        "dependencies": {
          "aurelia-animator-css": "npm:aurelia-animator-css@^1.0.0",
          "aurelia-binding": "npm:aurelia-binding@^1.2.1",
          "aurelia-bootstrapper": "npm:aurelia-bootstrapper@^1.0.0",
          "aurelia-dialog": "npm:aurelia-dialog@^1.0.0-rc.1.0.3",
          "aurelia-event-aggregator": "npm:aurelia-event-aggregator@^1.0.0",
          "aurelia-fetch-client": "npm:aurelia-fetch-client@^1.0.0",
          "aurelia-framework": "npm:aurelia-framework@^1.0.0",
          "aurelia-history-browser": "npm:aurelia-history-browser@^1.0.0",
          "aurelia-http-client": "npm:aurelia-http-client@^1.0.0",
          "aurelia-loader-default": "npm:aurelia-loader-default@^1.0.0",
          "aurelia-logging-console": "npm:aurelia-logging-console@^1.0.0",
          "aurelia-pal-browser": "npm:aurelia-pal-browser@^1.0.0",
          "aurelia-polyfills": "npm:aurelia-polyfills@^1.0.0",
          "aurelia-router": "npm:aurelia-router@^1.0.7",
          "aurelia-templating-binding": "npm:aurelia-templating-binding@^1.0.0",
          "aurelia-templating-resources": "npm:aurelia-templating-resources@^1.0.0",
          "aurelia-templating-router": "npm:aurelia-templating-router@^1.0.0",
          "aurelia-testing": "npm:aurelia-testing@^1.0.0-beta.2.0.1",
          "aurelia-validation": "npm:aurelia-validation@^1.0.0",
          "aurelia-view-manager": "npm:aurelia-view-manager@^0.1.0",
          "css": "github:systemjs/plugin-css@^0.1.35",
          "fetch": "github:github/fetch@^2.0.3",
          "i18next-xhr-backend": "npm:i18next-xhr-backend@^1.4.2",
          "moment": "npm:moment@^2.18.1",
          "select2": "github:select2/select2@^4.0.3",
          "text": "github:systemjs/plugin-text@^0.0.11",
          "zui": "MBAKnet:mbak@alpha"
        },
        "devDependencies": {
          "babel": "npm:babel-core@^5.8.24",
          "babel-runtime": "npm:babel-runtime@^5.8.24",
          "core-js": "npm:core-js@^1.1.4"
        },
        "overrides": {
          "github:select2/select2@4.0.3": {
            "shim": {
              "select2": [
                "jquery"
              ]
            },
            "dependencies": {
              "jquery": "jspm:jquery@*"
            }
          }
        }
      },
      "dependencies": {}
    }

config.js内容

https://gist.github.com/menelaosbgr/94d64c03fd8f010688fb9424b63f36c5

解决方案

我找到答案并发布了。我只需要将jquery安装为jquery（进入项目）：

jspm install jquery=jquery

Answer 1

问题是toastr正在使用以下命令，即期望安装模块。

     `module.exports = factory(require('jquery'));`

事实证明我需要的只是运行：

jspm install jquery=jquery

<强>参考：

https://www.sitepoint.com/modular-javascript-systemjs-jspm/

TypeError：$不是函数 - toastr.js- AMD和SystemJS

更新

问题

package.json内容

config.js内容

解决方案

1 个答案: