[我正在尝试通过Babel和Rollup将jQuery加载到捆绑的js中,但是由于某些原因,它不断抛出此错误消息:
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代码所在的'components'文件夹中...
这是我的app.js
import jQuery from 'jquery';
var $ = jQuery;
$(function(){
console.log("Hello, jQuery!");
});
我是否错误地导入了jQuery?我是否需要使用更好的插件来做到这一点?我在网上找到的所有教程都让我执行了解决方法。 (因此,为什么我的gulpfile中注释了一些模块。)
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