使用 webpack 的依赖答案

【问题标题】：Dependencies with webpack使用 webpack 的依赖
【发布时间】：2020-12-19 10:17:03
【问题描述】：

所以我在 symfony 项目中使用 webpack encore，并且我有这个带有 jQuery 插件的 github repo，我想导入这个插件以在我的代码中使用它，但我不知道该怎么做那;即使我确信这是一个非常经典的用例...... 这种依赖关系应该用 yarn 或 webpack 解决，还是两者都解决？我当然用谷歌搜索，但我没有找到任何明确的东西。我并不真正掌握 webpack，所以我真的在寻找类似“一步一步”的解释。我拥有包含插件的存储库，它有一个 bower.json 文件，但没有其他包管理器文件（例如没有 package.json 文件），但如果需要，我完全可以添加一些支持（我想它会需要） .

插件代码是这样的：

jQuery.fn.extend({
    pluginFunction: function(options) {
        return $(this).each(function() {
            // code
        });
    }
});

所以换个说法：我拥有一个带有 jQuery 模块的存储库。使用我其他项目的 javascript 代码，我希望能够使用它（例如 $('#selector').pluginFunction(); ）。谢谢

【问题讨论】：

您好@HelloSir，请提供更多信息。例如。带有要导入项目的 jQuery 插件的 GitHub 存储库链接。还有一些信息，例如有关您如何尝试导入插件的代码示例。顺便说一句，webpack 和 yarn 是完全不同的东西。 Webpack 是一个模块捆绑器，而 yarn 是一个包管理器。另一个流行的包管理器是 npm。因此，请向我们提供有关您的问题的更多信息，并注意准确表达事实，不要混淆它们。我们可以为您提供更好的帮助:)
我详细一点。我宁愿不共享存储库链接，但我解释了它的状态。因此，如果我是正确的，那不是 webpack 问题，而只是包管理器问题，所以在我的情况下是 yarn ？

标签： javascript webpack yarnpkg

【解决方案1】：

首先，我建议放弃 bower.json 文件。 Bower died a long time ago.

添加一个 package.json 文件，其中 main 属性指向您的插件文件。

{
    "name": "my-plugin",
    "main": "my-plugin.js",
    "peerDependencies": {
        "jquery": "^3.5.0"
    }
}

现在在您的插件 JavaScript 中，您需要将代码包装在 UMD（通用模块定义）中。这允许您的插件通过 AMD、CommonJS 和作为浏览器全局加载。

(function (factory) {
    // Universal Module Definition
    if (typeof define === "function" && define.amd) {
        define(["jquery"], factory);
    } else if (typeof module === "object" && module.exports) {
        module.exports = factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }
})(function ($) {
    $.fn.myPlugin = function () {
        // plugin code here
    };
});

Webpack 同时支持 AMD 和 CommonJS 定义，因此它将使用遇到的第一个定义 - 在本例中为 AMD。

此时我建议将包发布到 NPM 以使其更易于在您的项目中使用，但您也可以使用 yarn 将 GitHub 存储库添加为 pacakges：

yarn add https://github.com/HelloSir/my-plugin

现在您可以在您的应用代码中简单地require 您的插件将其附加到 jQuery：

const $ = require('jquery');
require('my-plugin');

$('.selector').myPlugin();

【讨论】：