The bundle is the starting point, can require local files, npm modules or local modules
// 3rd party code we got from icomoon to cache svg icons
require('app-svg-cache');
// local modules
var smartBanner = require('app-smart-banner')();
var zipAutoComplete = require('app-autocomplete')();
var smartBanner = require('app-smart-banner')();
var saveHandler = require('app-save-home-icon')();
// local module required
var searchFilter = require('app-filters')
// the only instantiated if needed on the page
if(document.querySelector('#searchBtn')) {
var searchFilterOverlay = new searchFilter();
}
bundling options
// used grunt-browserify
// references bundle file and output file
browserify: {
global: {
files: {
"../../js/modules/global.js": "ui-module-bundles/global.js"
}
}
}
// after this we run the generated file through minification, etc.
The package.json associated with any module requiring template precompilation uses the hbsfy transform then the template is precompiled during the browserify grunt task and the minimal handlebars runtime is included in the bundled .js file
"browserify": {
"transform": [
[
"hbsfy",
{
"extensions": [
"html"
],
"precompilerOptions": {
"knownHelpersOnly": true,
"knownHelpers": {
"ifequal": true,
"mlsresult": true
}
}
}
]
]
},
npm install hbsfy --save-dev
We use ES6 features like maps, sometimes ES6 templates. If your module needs features like this add the babelify transform to the package.json and install the required npm packages
"browserify": {
"transform": [
[
"babelify",
{
"presets": [
"es2015"
]
}
]
]
},
npm install babelify --save-dev
npm install babel-preset-es2015 --save-dev
We've experimented with bundling CSS with our module, hoping to have a fully encapsulated UI unit. Doing this will make the module js insert the CSS block into the page. It requires the transform npm install, the transform definition in the module package.json and the css insertion line in the module code.
"browserify": {
"transform": [
"browserify-css"
]
},
var css = require('./index.css');
npm install browserify-css --save-dev
mkdir app-zipMenu
cd app-zipMenu
npm init -y
npm install ./app-zipMenu --save-dev
Run the npm install command to add you new module to the main package.json so other developers can install it
var $ = require('jquery');
module.exports = zipMenu;
function zipMenu() {
if (!(this instanceof zipMenu)) return new zipMenu();
// do some stuff
};
module code