How to bundle jQuery and Foundation-Sites use Rollup.js?

Question

I wan't to bundle jQuery and Zurb-Foundation-Sites use Rollup.js.

I'm using Rollup with Gulp, this is my gulpfile.js.

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', () => {

  const plugins = [
    postimport,
    autoprefixer({ browsers: ['last 2 versions', 'ie >= 10', 'and_chr >= 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', () => {
  gulp.watch(files.css, ['sass:compile']);
});

gulp.task('js:rollup', () => {
  rollup.rollup({
    entry: configs.jsEntry,
    plugins: [
      resolve(),
      inject({
        include: '../src/**/*.js',
        exclude: 'node_modules/**',
        modules: {
          $: 'jquery',
          jQuery: 'jquery',
        },
      }),
    ],
  }).then((bundle) => {
    bundle.write({
      format: 'es',
      dest: configs.jsDest,
      sourceMap: true,
    });
  });
});

gulp.task('js:watch', () => {
  gulp.watch(files.js, ['js:rollup']);
});

gulp.task('default', ['sass:watch', 'js:watch']);

I'm a newer.

I don't know how to bundle jQuery and Foundation-Sites use Rollup.

In my main.js, I write import 'foundation-sites/js/foundation.core.js'; , but it doesn't work.

Answer 1

Opps!

Use Rollup Plugin Commonjs can resolve this question. https://github.com/rollup/rollup-plugin-commonjs