magento2有两种主要JS插件封装形式，widget和knockout。而大多数情况下，外部引入的plugin都应该实现这两种封装，才能在magento2中完整地利用，主要是因为knockout template不能使用widget，即那些.html文件。

假设你已经了解这些：https://segmentfault.com/a/11...

不解释requirejs-config.js部分，假定已引入chosen并命名为“jquery.chosen”，以下是widget的代码：

define([
    'jquery',
    'jquery/ui',
    'jquery.chosen'
], function ($){
    $.widget('mage.jqchosen', {
        options: {
            disable_search_threshold: 999,
            width: '100%'
        },
        _init: function () {
            var _self = this;
            if(this.tagName == 'SELECT') {
                $(this.element).chosen(this.options);
            }
            $(this.element).find('select').each(function() {
                var _hidden = $(this).is(':hidden');
                $(this).chosen(_self.options);
                if(_hidden) {
                    var _id = $(this).attr('id')+"_chosen";
                    $("#"+_id).hide();
                }
            });
        }
    });

    return $.mage.jqchosen;
});

将可以用以下代码使用chosen

<div data-mage-init='{"jqchosen":{}}'>
    <select>
        <option>...</option>
    </select>
</div>

以下是knockout形式的插件：

define(['jquery','ko','jquery.chosen'], function($, ko) {
    ko.bindingHandlers.chosen = {
        update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
            if(!$(element).data('__chosen_loaded')) {
                if(element.tagName == 'SELECT') {
                    $(element).chosen({
                        disable_search_threshold: 999,
                        width:'100%'
                    });
                    $(element).data('__chosen_loaded', true);
                }
            }
        }
    };
});

只能应用在knockout组件（假设在requirejs-config.js命名为“knockout-chosen”）:

// app/code/Vendor/Module/view/frontend/web/js/ko_example.js
define(['ko', 'uiComponent', 'knockout-chosen'], function(ko, Component) {
    return Component.extend({});
});

<div data-bind="scope: 'koexample'">
    <select data-bind="{chosen:true}">
        <option>...</option>
    </select>
</div>
 
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "koexample": {
                        "component": "Vendor_Module/js/ko_example"
                    }
                }
            }
        }
    }
</script>