Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Implement ES6 modules JavaScript with webpack #258

Merged
merged 26 commits into from
Dec 17, 2018
Merged

Conversation

chrimesdev
Copy link
Member

@chrimesdev chrimesdev commented Nov 27, 2018

Use modules to expose components individual logic and compile them into a single JavaScript file using webpack and ES6. Refactor emergency banner JavaScript as an example. Still a work in progress, need to refactor the configuration and further components.

@mikemonteith
Copy link
Contributor

Are you going to integrate the webpack setup into gulp? (https://pawelgrzybek.com/using-webpack-with-gulpjs/)
Might help keep all of the build-related stuff in one place.

@chrimesdev chrimesdev force-pushed the feature/es6-webpack branch 13 times, most recently from 15227a6 to 4b8da8d Compare November 28, 2018 15:44
Use modules to expose components individual logic and compile
them into a single JavaScript file using webpack and ES6. Refactor
emergency banner JavaScript as an example. Still a work in progress,
need to refactor the configuration and further components.
Setup eslint to check for linting errors within our JavaScript
using the shared NHS.UK configuration for eslint.
https://github.com/nhsuk/eslint-config-nhsuk
Create a gulp task to compile our JavaScript using the webpack
gulp plugin. Deleting the old build folder and using the main dist
folder for our built JavaScript.
The word 'to' was missing from the sentence for the instructions
to wait for the feedback banner to display.
Refactor the feedback banner JavaScript so that it can be imported
as a module, using ES6 syntax.
Refactor the skip link JavaScript so that it can be imported
as a module, using ES6 syntax.
Refactor the header JavaScript so that it can be imported
as a module, using ES6 syntax.
Following the webpack development, clean up the gulp tasks
to be more efficent.
Move the eslint configuration file into the tests/linters folder
to be with the sass-lint configuration. Also run both the linters on
the npm test command.
Setup htmlhint to lint our HTML and fix any issues that
were reported in various pages and templates.
@chrimesdev chrimesdev force-pushed the feature/es6-webpack branch 2 times, most recently from 1534e66 to c25418c Compare December 17, 2018 11:17
@chrimesdev chrimesdev force-pushed the feature/es6-webpack branch 14 times, most recently from 5b092a1 to 01bcd71 Compare December 17, 2018 12:25
…ples

Add documentation for importing ES6 JavaScript modules and also
delete documentation for specific tools or technologies such as
gulp and expressjs.
@chrimesdev chrimesdev force-pushed the feature/es6-webpack branch 2 times, most recently from 8c3b3a5 to fd2f71a Compare December 17, 2018 12:38
The versioned assets should not included within the npm
installation directory.
The skip link js wasn't creating the click and blur events properly.
Also added DOMContentLoaded event to all the imported components so
they don't fire before DOM has loaded.
@mcheung-nhs
Copy link
Collaborator

Have added a DOMContentLoaded when initialising components, which will deal with @mikemonteith's concerns above regarding the skiplink element not loaded before the js.

@mcheung-nhs mcheung-nhs merged commit 3589890 into master Dec 17, 2018
@chrimesdev chrimesdev deleted the feature/es6-webpack branch December 17, 2018 15:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants