Foundation 6 JS Gulp构建报错：未找到define和require变量

Let’s break down exactly why you’re hitting these errors first:

• Modernizr’s define error: You’re using the uncompiled source file (modernizr/src/Modernizr.js), which is written as an AMD module. Browsers don’t natively understand the define syntax—you need the pre-built, browser-ready version of Modernizr instead.
• Foundation’s require error: Foundation 6’s JavaScript uses CommonJS modules (the require syntax), which browsers also don’t support out of the box. Your current setup just concatenates files, but you need a module bundler (like Webpack, which you already have installed!) to convert these modules into a single, browser-executable script.

Here’s how to fix both issues step by step:

Step 1: Fix Modernizr File Path #

In your gulpfile.js scripts task, replace the source path for Modernizr with the pre-built version from your Bower folder:

// Replace this line:
return gulp.src([pM_folder+'/modernizr/src/Modernizr.js'])
// With this:
return gulp.src([pM_folder+'/modernizr/modernizr.js'])

The root of your Bower-installed Modernizr package has a ready-to-use modernizr.js file that doesn’t rely on AMD define.

Step 2: Use Webpack to Bundle Foundation’s Modules #

Your package.json already includes Webpack, but you’re not using it to handle module dependencies. Let’s adjust your Gulp task to leverage Webpack properly:

2.1 Install Webpack Stream #

First, add webpack-stream to your dev dependencies to integrate Webpack with Gulp:

npm install webpack-stream --save-dev

2.2 Update Your Gulpfile #

Modify your gulpfile.js to import Webpack and rewrite the scripts task:

// Add these imports at the top of the file
var webpack = require('webpack-stream');
var webpackCore = require('webpack-stream').webpack;

// Rewrite the entire scripts task
gulp.task('scripts', function () {
  // Copy pre-built Modernizr to public JS folder first
  gulp.src([pM_folder+'/modernizr/modernizr.js'])
    .pipe(gulp.dest('./public/js/'));

  // Bundle app.js + Foundation modules with Webpack
  return gulp.src('./assets/scripts/app.js')
    .pipe(webpack({
      entry: './assets/scripts/app.js',
      output: {
        filename: 'app.js',
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules|bower_components/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: ['es2015']
              }
            }
          }
        ]
      },
      resolve: {
        modules: ['./node_modules', './bower_components'],
        alias: {
          jquery: pM_folder+'/jquery/dist/jquery.js'
        }
      },
      plugins: [
        // Make jQuery globally available for Foundation (it expects a global $)
        new webpackCore.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery'
        })
      ]
    }))
    .pipe(gulp.dest('./public/js/'));
});

2.3 Update Your App.js #

Modify assets/scripts/app.js to import and initialize Foundation correctly (using ES6 imports instead of relying on script tags):

import $ from 'jquery';
import Foundation from 'foundation-sites';

// Initialize Foundation once the DOM is fully loaded
$(document).ready(function() {
  $(document).foundation();
});

Step 3: Verify and Test #

Run your default Gulp task again:

gulp

This will:

1. Compile your Sass as it did before
2. Bundle your JS (including Foundation and jQuery) into a browser-ready app.js
3. Copy the pre-built Modernizr to your public JS folder

Your JS errors should now be resolved, and Foundation’s JavaScript features should work as expected.

内容的提问来源于stack exchange，提问作者Moaz Mabrok