How to enable JS Foundation 6 files through ES6 import?

Question

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

My task looks like this:

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 to import a Foundation JS module. This file consists of only one line:

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

After compilation, I get an uncompiled base module with some browser code and babelify:

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

 import './inc/app'; 

And in this case, al works fine:

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

Answer 1

The problem is that you are trying to import the source file of the package of base sites. You must use the bundled version or a single source file already uploaded to 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';