Wie können Sie Foundation 6 JS-Dateien über den ES6-Import einbinden?

Question

Ich benutze Schluck mit browserify + babelify, um meine JS zu kompilieren.

Meine Aufgabe sieht wie folgt aus:

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 ich in Import Foundation JS Modul versuche. Diese Datei besteht nur eine Zeile:

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

Nach dem Übersetzen ich nicht Stiftung Modul mit einigen browserify und babelify Code kompiliert erhalten:

ABER! Ich versuchte Datei von node_modules zu src Ordner zu kopieren und importieren:

import './inc/app'; 

Und in diesem Fall al funktioniert:

Warum? Was für eine Magie? Was wird der richtige Weg sein?

Answer 1

Das Problem ist, dass Sie versuchen, eine Quelldatei des Foundation-Sites-Pakets zu importieren. Sie müssen die gebündelte Version oder die einzelne bereits vorhandene Quelldatei unter node-modules/foundation-sites/dist/plugins/foundation.util.motion verwenden.

dann Ihren Import mit diesem ersetzen und es wird funktionieren:

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