third party dependencies

THIRD-PARTY DEPENDENCIES

Including third-party dependencies in your toolkit

Fabricator Builder makes it easy to include a third-party library like jQuery in your toolkit.

Using Webpack to bundle dependencies

Fabricator Builder uses Webpack to bundle modules using the CommonJs module syntax:

/* path/to/my-module.js */
module.exports = {
  foo: function() {
    return 'bar';
  }
};

/* path/to/toolkit.js */
var myModule = require('./my-module');
myModule.foo(); // 'bar'

In the above example, webpack will find all the dependencies and output a single file that contains both my-module.js and toolkit.js.

Handling modules that do not use CommonJS

Many modules are just plain JavaScript files that don't use the CommonJS module syntax; an example might be a jQuery plugin.

Fabricator Builder includes both the Imports Loader and the Scripts Loader to handle these cases.

IMPORTS LOADER

// installed via NPM
var $ = require('jquery');

// installed via Bower
require('imports?$=jquery!somePlugin/dist/plugin');

$('#my-button').somePlugin();

SCRIPTS LOADER

This loader evaluates code in the global context, just like you would add the code into a script tag. In this mode, every normal library should work. require, module, etc. are undefined.

Note: The file is added as a string to the bundle. It is not minimized by webpack, so use a minimized version. There is also no dev tool support for libraries added by this loader.

require('script!anotherLib/lib/another-lib');

Pre-compile your files

Because Fabricator Builder is used directly in gulp, you have the ability to pre-compile your files before serving them to the builder, this enables you to run toolkit specific things like ngAnnotate or ngTemplateCache if you are working with AngularJS for example.

This also is great for the case that you don't want or can't use webpack. You can then compile to one file, and give that to Fabricator Builder, which will just work for webpack.