Question

我很难将velocity.js集成到我现有的webpack框架中，并使其作为对jquery的依赖工作。

本质上，velocity.js期望jquery（或$）在全局对象上可用，以便它可以增强功能，以便可以实现以下$(elem).velocity。我尝试过使用＆＃34; expose-loader＆＃34;将jquery和$暴露给窗口但遇到错误global is not defined。以下是我的webpack配置

的摘录

loaders: [
  { test: /\.coffee$/, loader: "coffee-loader" },
  { test: /\.less$/, loader: "style-loader!css-loader!less-loader" },
  { test: /\jquery\.min\.js/, loader: "expose?jQuery!expose?$" },
  { test: /\velocity\.min\.js/, loader: "expose?Velocity" }
]

我也尝试过使用非缩小版。这是加载jquery的错误所在：

module.exports = global["jQuery"] = require("-!/.../node_modules/expose-loader/index.js?$!/.../app/bower_components/jquery/dist/jquery.js");

/*****************
 ** WEBPACK FOOTER
 ** ./app/bower_components/jquery/dist/jquery.js
 ** module id = 6
 ** module chunks = 0
 **/

我不知道expose-loader是如何工作的，也无法理解上面的重要性，特别是因为我能够暴露velocity.js＆＃39; Velocity到全局窗口。

作为后备，我需要var Velocity = require("velocity")进入我的app文件并使用velocity.js，就像没有jquery一样，即

。

Velocity(document.getElementById("rect"), { opacity: 0 }, { duration: 1000 })

非常感谢任何帮助或建议。

Answer 1

要使这项工作有两个部分。首先将jQuery加载到您的页面中，就像通常一样。尝试将jQuery包含在您的webpack包中会有点麻烦。

根据代码中的实际需求：

require("imports?$=jquery!<jQueryModule>")

将<jQueryModule>替换为要加载的模块的路径和/或名称。 Webpack将确保为$正确映射，以便它可以作为插件附加。 jQueryModule可以只是您在webpack配置中定义别名的名称。我个人更喜欢使用简单的名称而不是路径 - 这样您就可以管理搜索到的文件夹上下文 - 但这只是您的通话。

在webpack配置中，您希望使用ProvidePlugin告诉webpack jQuery可用：

 new webpack.ProvidePlugin({
    // Automtically detect jQuery and $ as free var in modules
    // and inject the jquery library
    // This is required by many jquery plugins
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    "root.jQuery": "jquery"
 }),

加载此类代码时 - 将变量导入到您正在使用的模块的命名空间中 - 而不是从模块中暴露某些东西 - 因此使用导入。

使用velocity.js作为对webpack的jquery的依赖

1 个答案: