NPM Installation Instructions

The following pages have modules that can be imported in your own projects via NPM:

Webpack Setup Instructions

Follow these steps to import these into your project:

1. You will notice that the examples ask you to include the npm modules like this:

   Wrap text

   ☜ Scroll to read full source ☞

   // import the js module import enableCarousel from '~enable-a11y/js/modules/enable-carousel'; // import the CSS import '~enable-a11y/css/enable-carousel'; ... // How to initialize the enableCarousel library enableCarousel.init(); ...

   The ~ is resolved by putting the following in your webpack.config.js:

   Wrap text

   ☜ Scroll to read full source ☞

   module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y'), '~glider-js': path.resolve(__dirname, 'node_modules/glider-js'), '../enable-node-libs/accessibility-js-routines/dist/accessibility.module.js': path.resolve(__dirname, 'node_modules/accessibility-js-routines/dist/accessibility.module'), '~glider-js/glider.js': path.resolve(__dirname, 'node_modules/glider-js/glider'), '~jquery/dist/jquery.min.js': path.resolve(__dirname, 'node_modules/jquery/src/jquery'), '../enable-node-libs/ableplayer/thirdparty/js.cookie.js': path.resolve(__dirname, 'node_modules/js-cookie/dist/js.cookie') }, ... } }

   Note the ../enable-node-libs/ and ~ path aliases. This is due to the production Enable having fixed versions of some third-party JavaScript libraries. In your code, these libraries will point to the production NPM versions inside your code (i.e. glider-js, accessibility-js-routines, js-cookieand jquery (jQuery is needed for AblePlayer only).