对于我自己，我使用了这个解决方案：
我使用的是 Laravel 框架，所以首先我将.webpackConfig (...) 方法添加到webpack.mix.js 文件中：
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
// By default, files from the directory "/node_modules" are not processed by the Babel loader,
// so in the Webpack configuration,
// an exception was added for loading from the directory "/node_modules/foundation-sites/js".
.webpackConfig({
module: {
rules: [{
// Section "// Babel Compilation." from "/node_modules/laravel-mix/src/builder/webpack-rules.js"
test: /\.jsx?$/,
// Thanks for the help with "exclude": http://qaru.site/questions/97960/import-a-module-from-nodemodules-with-babel-but-failed/624982#624982
exclude(file) {
if (file.startsWith(__dirname + '/node_modules/foundation-sites/js')) {
return false;
}
return file.startsWith(__dirname + '/node_modules');
},
use: [
{
loader: 'babel-loader',
options: Config.babel()
}
]
}]
}
});
注意：
要安装Foundation，我使用了包https://github.com/laravel-frontend-presets/zurb-foundation。并添加了将Foundation加载到/resources/assets/js/bootstrap.js文件中的代码：
/**
* We'll load jQuery and the Foundation jQuery plugin which provides support
* for JavaScript based Foundation features such as modals and tabs. This
* code may be modified to fit the specific needs of your application.
*/
try {
window.$ = window.jQuery = require('jquery');
require('foundation-sites/dist/js/foundation'); // 'foundation.min' can also be used if you like
// The app plugins for the Foundation
require('./plugins/entries/foundation');
} catch (e) {}
其次，我创建了文件/resources/assets/js/plugins/entries/foundation.js（该文件包含在// The app plugins for the Foundation.上面的代码中）。我在其中包含了我的模块（示例）：
import { CropText } from '../cropText';
Foundation.plugin(CropText, 'CropText');
第三，我创建了两个文件来包含Foundation插件：
1) /resources/assets/js/plugins/foundation.plugin.js
// By default, files from the directory "/node_modules" are not processed by the Babel loader,
// so in the Webpack configuration,
// an exception was added for loading from the directory "/node_modules/foundation-sites/js".
import { Plugin } from 'foundation-sites/js/foundation.plugin';
export {Plugin};
2)/resources/assets/js/plugins/foundation.util.mediaQuery.js
// By default, files from the directory "/node_modules" are not processed by the Babel loader,
// so in the Webpack configuration,
// an exception was added for loading from the directory "/node_modules/foundation-sites/js".
import { MediaQuery } from 'foundation-sites/js/foundation.util.mediaQuery';
export {MediaQuery};
在第四个中，我使用Foundation插件模板为我的插件创建了一个文件，其中包括上述两个文件：
/resources/assets/js/plugins/cropText.js
'use strict';
import $ from 'jquery';
import { MediaQuery } from './foundation.util.mediaQuery';
import { Plugin } from './foundation.plugin';
/**
* CropText plugin.
* @plugin app.cropText
*/
class CropText extends Plugin {
/**
* Creates a new instance of CropText.
* @class
* @name CropText
* @fires CropText#init
* @param {Object} element - jQuery object to add the trigger to.
* @param {Object} options - Overrides to the default plugin settings.
*/
_setup(element, options = {}) {
this.$element = element;
this.options = $.extend(true, {}, CropText.defaults, this.$element.data(), options);
this.className = 'CropText'; // ie9 back compat
this._init();
}
/**
* Initializes the CropText plugin.
* @private
*/
_init() {
MediaQuery._init();
this.cropText();
}
/**
* Crops the text.
*/
cropText() {
var size = +this.options.cropSize;
$(this.$element).each(function(i, value) {
var $valueText = $(value).text(),
$valueHtml = $(value).html();
if($valueText.length > size){
$(value).html('<span>' + $valueText.slice(0, size).trim() + '</span>' + '...').wrapInner('<a></a>');
var revealId = '#' + $(value).attr('data-open');
if ($(revealId + ' .close-button').attr('data-close') != undefined) {
$(revealId + ' .close-button').before($valueHtml);
} else {
$(revealId).append($valueHtml);
}
new Foundation.Reveal($(revealId), {
'data-overlay' : false
});
} else {
$(value).removeAttr('data-open').removeAttr('tabindex');
}
});
}
}
/**
* Default settings for plugin
*/
CropText.defaults = {
/**
* The size of the cropped text.
* @option
* @type {number}
* @default 255
*/
cropSize: 255
};
export {CropText};
就是这样。接下来，我只需要在页面的HTML代码中包含一个标准的JavaScript文件并初始化Foundation（示例）：
/resources/views/layouts/app.blade.php
<script src=" {{ mix('/js/app.js') }} "></script>
<script>
$(document).foundation();
</script>
附：对不起我的英语 ;-)，我使用了谷歌翻译。