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:
-
You will notice that the examples ask you to include the npm modules like this:
// 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 yourwebpack.config.js
: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-cookie
andjquery
(jQuery is needed for AblePlayer only).
- ${content}