title: How to bundle jQuery and Foundation-Sites use Rollup.js?
body: <p>I wan't to bundle jQuery and Zurb-Foundation-Sites use Rollup.js.</p>
  
  <p>I'm using Rollup with Gulp, this is my gulpfile.js.</p>
  
  <pre class="lang-js prettyprint-override"><code>const gulp = require('gulp'),
    sass = require('gulp-sass'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    postcss = require('gulp-postcss'),
    postimport = require('postcss-import'),
    rollup = require('rollup'),
    resolve = require('rollup-plugin-node-resolve'),
    inject = require('rollup-plugin-inject');
  
  // postcss plugin
  const autoprefixer = require('autoprefixer'),
    cssnano = require('cssnano');
  
  // files
  const files = {
    css: [
      '../src/sass/**/*.scss',
      '../src/css/**/*.css',
    ],
    js: [
      '../src/js/**/*.js',
    ],
  };
  
  // configs
  const configs = {
    cssDestPath: '../assets/css/',
    cssFileName: 'main.css',
    jsEntry: '../src/js/main.js',
    jsDest: '../assets/js/main.js',
  };
  
  gulp.task('sass:compile', () =&gt; {
  
    const plugins = [
      postimport,
      autoprefixer({ browsers: ['last 2 versions', 'ie &gt;= 10', 'and_chr &gt;= 2.3'], }),
      cssnano,
    ];
  
    const sassIncludePath = [
      '../node_modules/normalize-scss/sass',
      '../node_modules/foundation-sites/scss',
    ];
  
    gulp.src(files.css)
      .pipe(sourcemaps.init())
        .pipe(sass({ includePaths: sassIncludePath, }).on('error', sass.logError))
        .pipe(postcss(plugins))
        .pipe(concat(configs.cssFileName))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest(configs.cssDestPath));
  });
  
  gulp.task('sass:watch', () =&gt; {
    gulp.watch(files.css, ['sass:compile']);
  });
  
  gulp.task('js:rollup', () =&gt; {
    rollup.rollup({
      entry: configs.jsEntry,
      plugins: [
        resolve(),
        inject({
          include: '../src/**/*.js',
          exclude: 'node_modules/**',
          modules: {
            $: 'jquery',
            jQuery: 'jquery',
          },
        }),
      ],
    }).then((bundle) =&gt; {
      bundle.write({
        format: 'es',
        dest: configs.jsDest,
        sourceMap: true,
      });
    });
  });
  
  gulp.task('js:watch', () =&gt; {
    gulp.watch(files.js, ['js:rollup']);
  });
  
  gulp.task('default', ['sass:watch', 'js:watch']);
  </code></pre>
  
  <p>I'm a newer.</p>
  
  <p>I don't know how to bundle jQuery and Foundation-Sites use Rollup.</p>
  
  <p>In my main.js, I write <code>import 'foundation-sites/js/foundation.core.js';</code>, 
  but it doesn't work.</p>