What is the best approach to WordPress plugin development when your plugin requires numerous javascript library dependencies?
My example: I’m developing a plugin which makes heavy use of the Backgrid.js library in the plugins administration area. Basic dependencies of Backgrid.js are Backbone.js and Underscore.js. Not a problem because WordPress includes recent versions of both in recent versions.
The problem? In my Backgrid.js implementation I’m also having to use many of the available extensions, like backgrid-paginator to get pagination working. Many of the extensions are listed here: https://github.com/wyuenho/backgrid/wiki#extensions
My head scratcher is how to best manage this plugin long-term with my source control management. Because I did NOT want to go the long route of downloading each individual extension myself, I simply used Bower (http://bower.io/) within my plugin directory to quickly download these dependencies. This creates a /bower_components directory in my plugin folder where all these dependencies sit.
Now let me preface, I’m pretty new to using Bower. But I’m also pretty new to WordPress development so I’m not completely up to speed with best practices for this platform. Only working on it due to a client necessitating it.
Of course now my WordPress plugin is filled with loading scripts such as:
wp_enqueue_script('backgrid-paginator', CUSTOM_PLUGIN__PLUGIN_URL . 'bower_components/backgrid-paginator/backgrid-paginator.min.js', array( 'jquery','backbone','underscore','backgrid', 'backbone-pageable'));
wp_enqueue_style('backgrid-paginator-css', CUSTOM_PLUGIN__PLUGIN_URL . 'bower_components/backgrid-paginator/backgrid-paginator.min.css');
What is the best approach in managing this plugin long term with source control? I’m a little bit of a novice with Bower and everything on Google only talks about using Bower with WordPress theme development. Nothing speaks to using it with plugin development.
Thinking now, is the best approach to create a Bower bower.json in my plugin directory, which includes all these dependencies? I’ll add this bower.json file then to my source control for the plugin, but a README installation requirement will be including that the plugin requires XXX dependencies and the easiest way is to just run: bower install in the plugin’s directory to grab everything?
Is that the best approach? I’m trying to consider long term and make whoevers job it will be to take over responsibility for the plugin easier! 🙂
To my knowledge WordPress has no real standard for managing JavaScript and CSS dependencies outside of the enqueuing them in the right order.
Using Bower for managing the dependencies is definitely a good idea. It will keep your repo clean of vendor files and make it easy to update libraries later on.
If you want to make your life a little bit easier, you can also look into Grunt JS or Gulp JS which are build tools. You can use these to compress, uglify, etc all your JavaScript and CSS files into distributable items (e.g. all.min.js & all.min.css). This will make it easier to add/remove libraries.
Using these will also keep your enqueue statements cleaner.