Add JS modules support & use for GOVUKFrontend

The JS for GOVUKFrontend components is available
individually so you can only include what you
need:

https://github.com/alphagov/govuk-frontend/blob/v2.13.0/docs/installation/installing-with-npm.md#option-2-import-javascript

This uses the JS Modules syntax:

*[JS module](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)

Our JS is delivered as one file so we need to use
a bundler to convert the modules to a single file.

This adds a build step to transpile all modules
into a single file, which is then added to the
files combined into the one that get delivered.

Rollup is used as the simplest bundler to use for
this purpose. It also introduces the least
boilerplate JS.

Note: the CommonJS plugin is needed as GOV.UK
Frontend components are published as UMD modules.

In future, this work should let us work on this
story dependencies:

https://www.pivotaltracker.com/story/show/165380360
This commit is contained in:
Tom Byers
2019-10-11 10:26:25 +01:00
parent 3511f0b726
commit efe7e2f35e
4 changed files with 801 additions and 4 deletions

View File

@@ -0,0 +1,19 @@
import Header from 'govuk-frontend/components/header/header';
function initAll (options) {
// Set the options to an empty object by default if no options are passed.
options = typeof options !== 'undefined' ? options : {}
// Allow the user to initialise GOV.UK Frontend in only certain sections of the page
// Defaults to the entire document if nothing is set.
var scope = typeof options.scope !== 'undefined' ? options.scope : document
// Find first header module to enhance.
var $toggleButton = scope.querySelector('[data-module="header"]')
new Header($toggleButton).init()
}
export {
Header,
initAll
}