在Pattern Lab（node-gulp版）中集成selectize.js遇jQuery依赖问题

Hey there! Let’s work through this frustrating integration problem together—here’s how to get Selectize.js playing nicely with your Pattern Lab setup without breaking existing features:

1. First: Confirm if Pattern Lab Already Loads jQuery #

Most Node-Gulp versions of Pattern Lab come with jQuery preloaded, usually in the footer. The "can't find $ error" happened because your Selectize init code ran before Pattern Lab's jQuery loaded. But when you added jQuery to the <head>, you created a duplicate load, which causes conflicts that break Pattern Lab features.

• First, remove the manual jquery.min.js you added to head.mustache.
• Open your Pattern Lab in the browser, pop open the console, and type $ or jQuery. If it returns a function, Pattern Lab is already loading jQuery—great, we just need to adjust where we put Selectize.

2. Load Selectize.js & Init Code in the Right Place #

Since Pattern Lab loads jQuery in the footer, we need to place Selectize and our init code after that jQuery reference in foot.mustache:

<!-- In foot.mustache -->
<!-- Pattern Lab's jQuery script will be here (leave it as-is) -->
<script src="path/to/your/selectize.min.js"></script>
<script>
  // Wrap init code in document ready to ensure elements exist
  $(document).ready(function() {
    $('select.your-selector').selectize({
      // Add your Selectize config options here
      placeholder: 'Select an option...',
      // ... other settings
    });
  });
</script>

This way, jQuery is already available when Selectize loads and your init code runs—no more "$ is undefined" errors, and no duplicate jQuery conflicts.

3. If You Need a Custom jQuery Version #

If Pattern Lab's built-in jQuery is outdated or incompatible with Selectize, you’ll need to replace it instead of adding a second copy:

• Disable Pattern Lab's default jQuery load (check your Pattern Lab config file—look for settings related to "scripts" or "jQuery" and toggle it off).
• Add your preferred jquery.min.js to foot.mustache before Selectize.js, then use the init code above.
• If you still run into conflicts, use noConflict() to rename your jQuery variable:

  <script src="path/to/custom/jquery.min.js"></script>
  <script>
    // Rename jQuery to avoid conflicts with any leftover scripts
    var $j = jQuery.noConflict();
  </script>
  <script src="path/to/selectize.min.js"></script>
  <script>
    $j(document).ready(function() {
      $j('select.your-selector').selectize({
        // Your config
      });
    });
  </script>
  

4. Debugging Broken Pattern Lab Features #

If you still see features breaking after fixing the jQuery issue:

• Check the browser console for specific error messages (they’ll point you to which script is failing).
• Use the Network tab in DevTools to verify only one jQuery version is loading, and that all scripts load in the correct order (jQuery → Selectize → your init code).

内容的提问来源于stack exchange，提问作者Mike Earley