使用 Browserify / Browserify Shim 在全局 jQuery 中包含 slick-carousel 时出现问题

Question

我正在使用 Browserify 11.2 和 Browserify Shim 3.8，并试图利用 slick-carousel（通过 npm 包含）和从 CDN 加载的 jQuery。我意识到这需要使用 Browserify shim，但我无法让它工作。

这是我的 package.json 文件的相关部分。

  "devDependencies": {
      ...
      "browserify": "^11.2.0",
      "browserify-shim": "^3.8.10",
      ...
      "slick-carousel": "^1.5.8",
      ...
    },
    "browserify": {
      "transform": [
        "browserify-shim"
      ]
    },
    "browser": {
    },
    "browserify-shim": {
      "jquery": "global:jQuery",
      "slick-carousel": {
      }
    },
    "dependencies": {
    }

当尝试要求 slick-carousel 时，出现错误：

Cannot find module 'jquery' from 'path_to_node_modules/node_modules/slick-carousel/slick'

但是，如果我将 require('jquery') 输出为常量（例如）

const jq = require('jquery'), jquery 如我所料。

现在我的脚本只包含以下用于测试的内容：

require('jquery');
require('slick-carousel');

我一直很难全神贯注于 Browserify Shim - 感谢任何关于我做错了什么的指导。

Answer 1

您需要在 package.json:

中指定 slick-carousel 依赖于 jQuery

"browserify": {
  "transform": [
    "browserify-shim"
  ]
},
"browserify-shim": {
  "jquery": "global:jQuery",
  "slick-carousel": {
    "depends": [
      "jquery: jQuery"
    ]
  }
},

使用 Browserify / Browserify Shim 在全局 jQuery 中包含 slick-carousel 时出现问题

Trouble including slick-carousel with global jQuery using Browserify / Browserify Shim

gulp

browserify

browserify-shim