需要一个带有 Webpack 的 jQuery 插件

Posted 2023-05-07

【中文标题】需要一个带有 Webpack 的 jQuery 插件

【英文标题】：Require a jQuery-Plugin with Webpack

【发布时间】：2017-07-30 16:08:14

【问题描述】：

我想使用 Webpack 从所有需要的 javascript 文件中创建一个 scripts.js 文件。

在我的main.js 中，我需要三个模块：

require('jquery');
require('readmore');
require('foundation');

我的webpack.config.js 是这个：

var path = require('path');

module.exports = 
    entry: ["./js/main.js"],
    output: 
        path: path.resolve(__dirname, 'build'),
        filename: "scripts.js"
    ,
    resolve: 
        modulesDirectories: ["bower_components", "node_modules"],
        alias: 
            jquery: '../bower_components/jquery/dist/jquery.js',
            readmore: '../node_modules/readmore-js/readmore.js',
            foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
        
    

我的问题：readmore-js 是一个 jQuery 插件，它本身需要 jQuery。 运行 Webpack 后出现此错误：

ERROR in ./~/readmore-js/readmore.js
Module not found: Error: Can't resolve 'jquery' in '/Users/myName/www/myProject/node_modules/readmore-js'
 @ ./~/readmore-js/readmore.js 17:4-31
 @ ./js/main.js
 @ multi main

据我了解，问题在于 readmore 还希望在“nodes_modules”目录中加载模块 jQuery。我的第一种方法是通过将moduleDirectories 添加到配置文件来解决这个问题，但它仍然不起作用。 即使在这种情况下，插件也不应该再次加载 jQuery。

你知道如何全局加载 jQuery，然后“告诉”所有需要 jQuery 的模块自己“看，它就在那里！”

由于可能有帮助，以下是从插件的readmore.js 中复制出来的：

(function(factory) 
  if (typeof define === 'function' && define.amd) 
    // AMD
    define(['jquery'], factory);
   else if (typeof exports === 'object') 
    // CommonJS
    module.exports = factory(require('jquery'));
   else 
    // Browser globals
    factory(jQuery);
  

【参考方案1】：

您可以为此使用webpack.ProvidePlugin：

从main.js中删除需要jquery：

require('readmore');
require('foundation');

在webpack.config.js内配置webpack.ProvidePlugin：

var path = require('path');

module.exports = 
    entry: ["./js/main.js"],
    output: 
        path: path.resolve(__dirname, 'build'),
        filename: "scripts.js"
    ,
    resolve: 
        modulesDirectories: ["bower_components", "node_modules"],
        alias: 
            readmore: '../node_modules/readmore-js/readmore.js',
            foundation: '../bower_components/foundation-sites/dist/js/foundation.js'
        
    ,
    plugins: [
      new webpack.ProvidePlugin(
        $: 'jquery',
        jQuery: 'jquery'
      ),
    ]

【讨论】：

感谢您的回答，webpack 命令有效！但是我在运行 scripts.js 时遇到了问题，因为我无法再访问该插件：Uncaught TypeError: $(...).readmore is not a function at Object.<anonymous> [...] 我想我仍然对全局变量有问题？

我遇到了类似的问题。一些插件是如何加载的而其他插件是如何加载的，这是一个谜。我有一个现有的项目，但无法找出为什么有些工作和其他不工作。