webpack 的依赖

Question

所以我在 symfony 项目中使用 webpack encore，我有这个 github 回购和 jQuery 插件，我想导入这个插件以在我的代码中使用它，但我不知道该怎么做；即使我确定这是一个非常经典的用例...... 这种依赖应该用 yarn 或 webpack，或两者一起解决？我当然用谷歌搜索，但没有发现任何明确的内容。我并不是真正精通 webpack，所以我真的在寻找类似“一步一步”的解释。我拥有包含该插件的存储库，它有一个 bower.json 文件，但没有其他包管理器文件（例如没有 package.json 文件）但如果需要我完全可以添加一些支持（我猜它将需要）。

插件代码是这样的:

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

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

Answer 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 存储库作为包：

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

现在您只需 require 您的应用程序代码中的插件即可将其附加到 jQuery:

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

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

webpack 的依赖

Dependencies with webpack

javascript

webpack

yarnpkg