External Libraries
You can add any npm package to your WordPressify project and include it in the build.
Example: Adding a Library
Install the package:
npm install <package-name>Then add it to the appropriate bundle array in gulpfile.js. jQuery ships preinstalled and is already included in the header bundle by default:
/* -------------------------------------------------------------------------------------------------
Header & Footer JavaScript Bundles
-------------------------------------------------------------------------------------------------- */
const headerJS = [ './node_modules/jquery/dist/jquery.js' ];
const footerJS = [ './src/assets/js/**' ];Header vs Footer Scripts
headerJS- Loaded in the<head>before the DOM renders. Use this for libraries that other scripts depend on immediately.footerJS- Loaded at the end of<body>after the DOM is ready. Only footer scripts are processed through Babel (ES6 support). Your custom code should go here.
You can configure Babel to also process header scripts by modifying the corresponding gulp task in gulpfile.js.
gulpfile.js and package.json are baked into the Node.js Docker image, so changes require an image rebuild. Stop the server with CTRL/CMD+C, run npm run build, then npm run start. See Build Changes.