Babel + Rollup.js Импорт jQuery

Question

Я пытаюсь загрузить jQuery в мои js с помощью Babel и Rollup, но по какой-то причине он продолжает выдавать следующее сообщение об ошибке:

src/js/components/jquery/dist/jquery.js (40:46) The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten

events.js:163
      throw er; // Unhandled 'error' event
      ^
Error: 'default' is not exported by src/js/components/jquery/dist/jquery.js
    at error (/var/www/node_modules/rollup/dist/rollup.js:170:12)
    at Module.error$1 [as error] (/var/www/node_modules/rollup/dist/rollup.js:8007:2)
    at Module.trace (/var/www/node_modules/rollup/dist/rollup.js:8106:9)
    at ModuleScope.findDeclaration (/var/www/node_modules/rollup/dist/rollup.js:7691:22)
    at Node.bind (/var/www/node_modules/rollup/dist/rollup.js:6743:29)
    at /var/www/node_modules/rollup/dist/rollup.js:5291:50
    at Node.eachChild (/var/www/node_modules/rollup/dist/rollup.js:5308:5)
    at Node.bind (/var/www/node_modules/rollup/dist/rollup.js:5291:7)
    at /var/www/node_modules/rollup/dist/rollup.js:5291:50
    at Node.eachChild (/var/www/node_modules/rollup/dist/rollup.js:5305:19)

Вот мой файл глотка.

var gulp         = require('gulp');
var gutil        = require('gulp-util');
var sourcemaps   = require('gulp-sourcemaps');
var sass         = require('gulp-sass');
var rollup       = require('gulp-better-rollup')
var autoprefixer = require('gulp-autoprefixer');
var server       = require('gulp-express');
var babel        = require('rollup-plugin-babel');
var eslint       = require('rollup-plugin-eslint');
//var commonjs     = require('rollup-plugin-commonjs');
//var nodeResolve  = require('rollup-plugin-node-resolve');
var inject       = require('rollup-plugin-inject');


gulp.task('bundle', function() {
  gulp.src('./src/js/**/*.js')
  .pipe(sourcemaps.init())
    // transform the files here.
    .pipe(rollup({
      // any option supported by Rollup can be set here.
      entry: './src/js/app.js',
      plugins: [
        babel({
          exclude: 'node_modules/**',
        }),
        eslint({
          exclude: 'node_modules/**',
        }),
        inject({
          include: '**/*.js',
          exclude: 'node_modules/**',
          jQuery: 'jquery',
          $: 'jquery',
        })
      ],
      format: 'cjs',
    }))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./dist'));
});

И, конечно, у меня есть Bower, импортирующий jQuery в мою папку "компоненты", где находится код Babel...

Вот мой app.js

import jQuery from 'jquery';
var $ = jQuery;

$(function(){
  console.log("Hello, jQuery!");
});

Я неправильно импортирую свой jQuery? Нужно ли использовать лучший плагин для достижения этой цели? Все учебники, которые я нашел в сети, заставляют меня делать обходной путь. (Следовательно, почему у меня есть несколько модулей, закомментированных в моем gulpfile.)

Answer 1

Had the same issue! Quite annoying one. Took me some time to figure out.

1. npm i jquery --save-dev (for development)
2. import $ from 'jquery' where is needed
or: use import inject from '@rollup/plugin-inject';
Ex: const injectJQueryInModule = inject({
    $: 'jquery',
    fs: ['fs', '*'],
    include: ['**/*.mjs', '**/*.js'],
    exclude: 'node_modules/**',
    'Module_name_to_assign': path.resolve(`${__dirname}/libs/Module_name_to_assign.js/.mjs/.ts`),
    modules: { }
})
Checkout: https://github.com/rollup/rollup-plugin-inject