Importing fullPage.js in a view CommonJS way

Question

I'm trying to write a simple app structure in Marionette starting from Browserify and Grunt skeleton that I found on Marionette.js website: Here is the repo.

I haven't used Marionette and Browserify before and I'm not really used to the ES2015 syntax yet.

How can I import a plugin i.e. fullPage.js to use it in a view?

This is my view.js right now:

import {Marionette} from '../../../vendor/vendor';
import template from '../../templates/homepage.jst';
export default Marionette.View.extend({
  el: '#app',
  template: template
});

I've loaded it with npm, and bundled it in "vendor" already

I'm actually looking for the equivalent of

<script src="node_modules/fullpage.js/dist/jquery.fullpage.min.js></script>

for this view.

How should I do this?

Answer 1

If anyone else is interested...

I solved it like this:

1) I installed browserify-shim via npm. This makes CommonJS incompatible files browserifyable (as it was the fullPage.js case).

2) Added to package.json:

"browser": {
  "fullpage1": "./jquery.fullpage.min.js"
},
"browserify-shim": {
  "fullpage1": { "depends": [ "jquery" ] }
},
"browserify": {
  "transform": [ "browserify-shim" ]
}

For some reason it would not take my whole path to node_modules/ folder, so I had to copy the .js file to the root of my project (next to package.json and Gruntfile.js). It would be very nice if someone figures out why it's not working for node_modules folder.

3) Added this to the Gruntfile.js:

grunt.initConfig({
    browserify: {
        dist: {
            options: {
                transform: [
                    ['babelify', {
                        'presets': ['es2015']
                    }],
                    ['jstify']
                ]
            },
            files: {
                './public/app.js': [
                    './app/initialize.js',
                    './jquery.fullpage.min.js'
                ]
            }
        }
    }

Here I'm adding fullpage.js to the app.js that I'm using in the built project.

4) In the end I added this to the render of my view:

import {Marionette} from '../../../vendor/vendor';
import template from '../../templates/homepage.jst';

export default Marionette.View.extend({
    el: '#app',
    template: template,
    onRender: function() {
        $('.fullpage').fullpage();
    }
});

And that's all