Transpile Foundation 6 JS插件(Webpack)

Question

ZURB基金会提供了几个JS插件，如遵守，均衡器，切换器，粘性等等。

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

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

Answer 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

一个小小的例子，只要有一个遵守插件，就会看起来类似于这样：

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;