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).