如何通过 ES6 导入包含 Foundation 6 JS 文件？答案

【问题标题】：How to include Foundation 6 JS files via ES6 import?如何通过 ES6 导入包含 Foundation 6 JS 文件？
【发布时间】：2016-06-20 04:56:16
【问题描述】：

我正在使用带有 browserify + babelify 的 gulp 来编译我的 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 代码的未编译基础模块：

但是！我尝试将文件从node_modules 复制到 src 文件夹并导入：

import './inc/app';

在这种情况下一切正常：

为什么？什么魔法？什么是正确的方法？

【问题讨论】：

标签： javascript gulp browserify babeljs

【解决方案1】：

问题是您正在尝试导入基础站点包的源文件。您必须使用捆绑版本或已在 node-modules/foundation-sites/dist/plugins/foundation.util.motion 上转译的单个源文件。

然后用这个替换你的导入，它将起作用：

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

【讨论】：