javascript – 如何通过ES6导入包含Foundation 6 JS文件?

前端之家收集整理的这篇文章主要介绍了javascript – 如何通过ES6导入包含Foundation 6 JS文件?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在使用浏览器化babelify来编译我的JS.

我的任务看起来像这样:

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

在src / js / main.js中我正在尝试导入Foundation JS模块.该文件只包含一行:

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

编译后我得到一些非编译的基础模块,其中包含一些browserify和babelify代码

enter image description here

但!我试图将文件从node_modules复制到src文件夹并导入它:

import './inc/app';

在这种情况下,al工作正常:

enter image description here

为什么?有什么神奇之处?什么是正确的方法

最佳答案
问题是您正在尝试导入foundation-sites包的源文件.您必须使用node-modules / foundation-sites / dist / plugins / foundation.util.motion上已经编译的捆绑版本或单个源文件.

然后用这个替换你的导入它将工作:

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

猜你在找的JavaScript相关文章