import and export a jquery function

Question

I have a custom.js file with jquery code :

$('.nav.navbar-nav > li').on('click', function(e) {
$('.nav.navbar-nav > li').removeClass('active');
$(this).addClass('active');
});

I want to export this code to the main.js file.Both files are in the same folder.

Went through the documentation but couldn't understand how to do it with jquery.

Solution

First you need to wrap this code in a function. Then you export the function. Finally you import it in main.js:

custom.js

export function foo () {
    $('.nav.navbar-nav > li').on('click', function(e) {
        $('.nav.navbar-nav > li').removeClass('active');
        $(this).addClass('active');
    });
}

main.js

import {foo} from 'custom'

foo();

ECMA SCRIPT 6 modules

Also notice that you need a module loader (like webpack/systemjs/requirejs etc.), as well as Babel that transpiles your ES6 code to ES5.

Comments

[Arkadiy Stepanov]

browserify and babel will do the job?

[Alon]

@ArkadiyStepanov yes they will!

[Arkadiy Stepanov]

i have found this example while reading the documentations about browserify var fs = require("fs"); var browserify = require("browserify"); browserify("./script.js") .transform("babelify", {presets: ["es2015", "react"]}) .bundle() .pipe(fs.createWriteStream("bundle.js")); but i cannot seem to implement it to my task gulp.task('app-scripts', function() { return gulp.src('src/js/app.js') .pipe(babel({ presets: ["es2015"] })) .pipe(uglify()) .pipe(gulp.dest('build/js')); }); Do you have any source that will help me?

[Arkadiy Stepanov]

i have already checked it,but it has a lot of things that i dont need,for example watchify = require('watchify'), i am limited only using babelify,babel,browserify and vinyl plugins,

[Alon]

@ArkadiyStepanov consider using Webpack instead of browserify. It's more complicated but you will find a lot more examples on it combined with Babel