jQueryとFoundation-SitesをバンドルするにはRollup.jsを使用しますか？

Question

jQueryとZurb-Foundation-Sitesをバンドルする必要はありません。Rollup.jsを使用しています。

私はGulpでロールアップを使用しています。これは私の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']); 

私は新しいです。

jQueryとFoundation-Sitesをバンドルする方法がわかりません。ロールアップを使用しています。

私のmain.jsには、import 'foundation-sites/js/foundation.core.js';, と書いてありますが、動作しません。

Answer 1

Opps！

ロールアッププラグインを使用するCommonjsはこの問題を解決できます。 https://github.com/rollup/rollup-plugin-commonjs