Transpile Foundation 6 JS 插件 (Webpack) 与 Gulp答案

【问题标题】：Transpile Foundation 6 JS Plugins (Webpack) with GulpTranspile Foundation 6 JS 插件 (Webpack) 与 Gulp
【发布时间】：2018-07-06 15:05:45
【问题描述】：

ZURB Foundation 提供了一些 JS 插件，例如 Abide、Equalizer、Toggler、Sticky 等等...

当我创建一个网站时，我可能不需要所有这些。根据我的网络研究，Foundation 6 提供了位于 Foundation-sites/dist/js/plugins 中的单个插件 js 文件。较新版本的 Foundation 使用了我不太熟悉的 Webpack 语法。

问题： 如何使用 GULP 将一组选定的 Foundation JS 插件转换为“普通”JavaScript/jQuery。

【问题讨论】：

所以你的问题是你自己的代码已经被转译了，但是导入的插件使用 ES6 并且没有被转译？

标签： webpack gulp zurb-foundation zurb-foundation-6

【解决方案1】：

您可以安装其中一个模板并查看其自定义配置。

https://github.com/zurb/foundation-zurb-template/tree/master/src/assets/js

https://github.com/zurb/foundation-zurb-template/blob/master/src/assets/js/lib/foundation-explicit-pieces.js

仅使用 Abide 插件的小示例类似于以下内容：

import $ from 'jquery';
import { Foundation } from 'foundation-sites/js/foundation.core';
import { rtl, GetYoDigits, transitionend } from 'foundation-sites/js/foundation.util.core';
import { Box } from 'foundation-sites/js/foundation.util.box'
import { onImagesLoaded } from 'foundation-sites/js/foundation.util.imageLoader';
import { Keyboard } from 'foundation-sites/js/foundation.util.keyboard';
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
import { Motion, Move } from 'foundation-sites/js/foundation.util.motion';
import { Nest } from 'foundation-sites/js/foundation.util.nest';
import { Timer } from 'foundation-sites/js/foundation.util.timer';
import { Touch } from 'foundation-sites/js/foundation.util.touch';
import { Triggers } from 'foundation-sites/js/foundation.util.triggers';
import { Abide } from 'foundation-sites/js/foundation.abide';


Foundation.addToJquery($);

// Add Foundation Utils to Foundation global namespace for backwards
// compatibility.

Foundation.rtl = rtl;
Foundation.GetYoDigits = GetYoDigits;
Foundation.transitionend = transitionend;

Foundation.Box = Box;
Foundation.onImagesLoaded = onImagesLoaded;
Foundation.Keyboard = Keyboard;
Foundation.MediaQuery = MediaQuery;
Foundation.Motion = Motion;
Foundation.Move = Move;
Foundation.Nest = Nest;
Foundation.Timer = Timer;

// Touch and Triggers previously were almost purely sede effect driven,
// so no // need to add it to Foundation, just init them.

Touch.init($);

Triggers.init($, Foundation);

Foundation.plugin(Abide, 'Abide');

module.exports = Foundation;

【讨论】：