How to include Foundation 6 JS files via ES6 import?

Question

I am using gulp with browserify + babelify to compile my JS.

My task looks like that:

import config from '../config.json';

import gulp from 'gulp';
import browserify from 'browserify';
import babelify from 'babelify'
import browserSync from 'browser-sync';
import babel from 'gulp-babel';
import source from 'vinyl-source-stream';


function onError(error) {
    console.log(error.toString());
    this.emit('end');
}

export function dev() {
    return browserify({
        entries: 'src/js/main.js',
        debug: true,
        extensions: ['.js', '.json', '.es6']
    })
        .transform(babelify)
        .bundle()
        .on('error', onError)
        .pipe(source('main.js'))
        .pipe(gulp.dest('public/js'))
        .pipe(browserSync.stream());
}


gulp.task('js:dev', dev);

In src/js/main.js I am trying in import Foundation JS module. This file consists only one line:

import 'foundation-sites/js/foundation.util.motion';

After compilation I get non compiled foundation module with some browserify and babelify code:

BUT! I tried to copy file from node_modules to src folder and import it:

import './inc/app';

And in this case al works fine:

Why? What the magic? What will be the right way?

Answer 1

The problem is that you are trying to import a source file of foundation-sites package. You must use the bundled version or the single source file already transpiled present on node-modules/foundation-sites/dist/plugins/foundation.util.motion.

Then replace your import with this and it will work:

import 'foundation-sites/dist/plugins/foundation.util.motion';