Skip to content

Latest commit

 

History

History
60 lines (50 loc) · 3.92 KB

README.md

File metadata and controls

60 lines (50 loc) · 3.92 KB
Raw

webpack4-es6-knockout

Project to review the best use of Webpack 4 with ES6 and Knockout.

Steps to run website

  1. Run npm install
  2. Run npm run start to start the Webpack Dev Server
  3. Browse to https://localhost:8080/

Steps to build production assets

  1. Run npm run build

Goals to achieve

  1. Done - Setup Webpack Dev Server to serve content and reload page when content (JS, HTML or CSS / SASS) changes
  2. Done - Use ES6 modules for Knockout components & view models
  3. Done - Use ES6 classes for Knockout view models
  4. Done - Add Knockout component HTML templates to Webpack bundle
  5. Done - Use Babel to transpile ES6 to ES5
  6. Done - Use Babel polyfill to support Promises and newer methods on native prototypes
  7. Done - Use Webpack to compile multiple SASS files into a single CSS file and generate a sourcemap
  8. Done - Use a SASS / CSS autoprefixer to automatically add vendor prefixes
  9. In Progress - Use "scoped" component SASS files that only affect the elements in the component HTML templates. Currently using BEM naming convention.
  10. Done - Create a vendor bundle using Webpack. The bundle should contain just third-party scripts (things in node_modules folder) and the bundle can be reused by several pages alongside a page specific code bundle.
  11. Done - Support handlebars syntax {{title}} for setting HTML text and HTML attribute values (Knockout.Punches)
  12. Not Done - Write unit tests against Knockout view models using Jasmine and potentially a test runner like Karama
  13. Done - Add Bootstrap 4 SASS files then compile to CSS and bundle into a single CSS file
  14. Not Done - Use Bootstrap 4 with icon fonts e.g. Glyphicons, Iconic or Octicons
  15. Done - Ensure Bootstrap 4 variables can be used in our own CSS files (useful for media queries, colours etc)
  16. Not Done - Create an npm package for a reusable component with zero dependencies and use this external component
  17. Not Done - Review the best way to support HTML templates in different languages (KO binding vs compiled templates in multiple languages)
  18. Done - Add a KO click handler to show how to use an ES6 arrow function to have the VM context for "this".
  19. Not Done - Implement modern but still backwards compatible approach to routing. Support data retrieval via Promises before navigation. Review knockout-contrib-router.
  20. Not Done - ESLint JavaScript.

Possible things to look at implementing

  1. Done - Use a fetch polyfill and create example where fetch is used to get data from the server
  2. Not Done - Create a service worker and cache bundles. Ensure a suitable version number / hash is used to allow bundle to be updated.
  3. Not Done - State store that manages and controls state changes for complicated a state scenario
  4. Not Done - Review if "html-webpack-plugin" should be used to generate the HTML files to serve up the bundles
  5. Not Done - Configure Webpack Dev Server for hot module reload (rather than just page reload) when changes made
  6. Not Done - Move code to an ASP.Net Core 2.x project and make use of WebpackDevMiddleware

Reference articles

https://github.com/abdennour/knockout-es6-components-webpack-boilerplate
https://hackernoon.com/a-tale-of-webpack-4-and-how-to-finally-configure-it-in-the-right-way-4e94c8e7e5c1
https://github.com/vkrol/knockout-webpack-example
https://github.com/johnligt/Knockout-TypeScript-Webpack-Starter
https://wanago.io/2018/06/04/code-splitting-with-splitchunksplugin-in-webpack-4/
https://medium.com/@pioul/modular-css-with-react-61638ae9ea3e
codymikol/karma-webpack#350