Jak dołączyć pliki JS Foundation 6 za pośrednictwem importu ES6?

Question

Używam gulp with browserify + babelify, aby skompilować mój JS.

Moim zadaniem wygląda tak:

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); 

W src/js/main.js Staram w Fundacji import module JS. Plik ten zawiera tylko jedną linię:

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

Po kompilacji dostaję non skompilowany moduł fundamentowej z pewnym browserify i kodu babelify:

ALE! Próbowałem skopiować plik z node_modules do katalogu src i importować go:

import './inc/app'; 

I w tym przypadku al działa dobrze:

Dlaczego? Co za magia? Jaka będzie właściwa droga?

Answer 1

Problem polega na tym, że próbujesz zaimportować plik źródłowy pakietu witryn fundamentowych. Musisz użyć wersji pakietowej lub pojedynczego pliku źródłowego już transpiled, który znajduje się na node-modules/foundation-sites/dist/plugins/foundation.util.motion.

Następnie zastąpić import z tego i to będzie działać:

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