How to work with AMD modules (ES6)

[lautiamkok]

How can I import jasny-bootstrap into my ES6 class?

ES6:

 'use strict';

    import $ from 'jquery';
    import jasny from 'jasny-bootstrap';

    class PushMenu {
        constructor() {
            this.slideShown = false;
            $('.navmenu').on('shown.bs.offcanvas', () => {
                this.slideShown = true;
            });
        }
    }

I get an error when I try to compile it with gulp:

{ Error: Cannot find module 'jasny-bootstrap' from '/var/www/my-project/js'

I am sure I have already installed it with npm:

`npm install jasny-bootstrap`

So I have to load it manually with the full path:

import jasny from '../node_modules/jasny-bootstrap/dist/js/jasny-bootstrap';

Then it is fine but 'shown.bs.offcanvas' does not work at all.

Any idea why?

[jasny]

Jasny bootstrap doesn't export a module (yet). You will need some sort of shim (like this one for webpack).

Since ES6 isn't supported yet in the browser, you're obviously using some packager (maybe a babel plugin). Anyway you need to find out if it supports shimming modules. Otherwise you're stuck with using the global scope for now.

[lautiamkok]

@jasny thanks for the reply. Got it resolved by adding these below in package.json, eg:

{
  "name": "project-prototype",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "license": "ISC",
  "dependencies": {
    "blueimp-gallery": "^2.21.3",
    "bootstrap": "^3.3.7",
    "jasny-bootstrap": "^3.1.3",
    "jquery": "^3.1.1",
    "jquery-ui": "^1.12.1",
    "js-cookie": "^2.1.3",
    "masonry-layout": "^4.1.1",
    "perfect-scrollbar": "^0.6.14",
    "react": "^15.0.2",
    "react-dom": "^15.0.2"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babelify": "^7.3.0",
    "browserify": "^13.1.0",
    "browserify-shim": "^3.8.12",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.0.13",
    "gulp-concat": "^2.6.0",
    "gulp-concat-css": "^2.3.0",
    "gulp-less": "^3.1.0",
    "gulp-livereload": "^3.8.1",
    "gulp-sourcemaps": "^1.6.0",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.7",
    "perfect-scrollbar": "^0.6.14",
    "systemjs": "^0.19.39",
    "systemjs-plugin-babel": "0.0.16",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.1.0"
  },
  "browser": {
    "jquery": "./node_modules/jquery/dist/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}