Recipes

Problem: I'm requiring a file that doesn't use any module loader.

Example: fixed-sticky

Solution:

Use imports-loader.

1. npm install --save-dev imports-loader

2. On your scripts.js webpack configuration add the following line to the loaders array: `{ test: /.js$/, loader: 'imports' }``

3. Whenever you require('fixed-sticky') just replace it by require('imports?jQuery=jquery!fixed-sticky').

---

Problem: Use jQuery from CDN

Solution:

1. add jquery in globals by changing your jade layout file:

script(src="https://ajax.googleapis.com/ajax/libs/jquery/{{JQUERY_VERSION}}/jquery.min.js")
script.
  window.jQuery || document.write('<script src="js/vendor.jquery-{{JQUERY_VERSION}}.min.js"><\/script>')

Note: replace {{JQUERY_VERSION}} to whatever version you're using.

2. Tell webpack to take jquery from the global scope: Add this to your webpack config:

  externals: {
      "jquery": "jQuery"
  }

3. Configure webpack or gulp to create the local version of jquery: 'build/js/vendor.jquery-{{JQUERY_VERSION}}.min.js'

---

Problem: using bower packages within webpack

Solution: TBD

Links:

• https://gofore.com/ohjelmistokehitys/stop-using-bower/

---

Problem: What tool can I use to help keep track of the accessibility of the html pages we build?

Solution:

gulp-a11y helps get an accessibility audit of pages gulp-accessibility helps display the results nicely.

Install those two and have a gulp task run them both:

gulp.src(srcFiles)
    .pipe($.a11y())
    .pipe($.a11y.reporter())
    .pipe($.accessibility());

Drawback:

We had this in the skeleton but it was much too heavy as it requires phantomJS

---