I am trying to use a grunt rollup plugin, grunt-rollup, to compile two es6 files into Javascript that can be run from node and eventually the browser. Currently, it compiles, but rollup seems to be creating an undefined variable from one of my class names. Here is my current configuration.
Imported ES6 File (src/base.js):
class Base{
constructor() {
return this;
}
}
export default Test;
Rollup Entrypoint ES6 File (src/test.js):
import Base from "./base";
class Test extends Base{
constructor() {
super();
return this;
}
}
export default Test;
Gruntfile.js
module.exports = function(grunt) {
var babel = require('rollup-plugin-babel');
var resolve = require('rollup-plugin-node-resolve');
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
rollup: {
options: {
sourceMap: true,
format: 'cjs',
plugins: function () {
return [
resolve({
// pass custom options to the resolve plugin
customResolveOptions: {
moduleDirectory: 'node_modules'
}
}),
babel({
exclude: './node_modules/**',
presets: ['es2015-rollup']
}),
];
},
},
main: {
dest: 'dest/bundle.js',
src: 'src/test.js'
}
},
uglify: {
main: {
options: {
sourceMap: true,
sourceMapName: 'dest/bundle.min.js.map'
},
files: {
'dest/bundle.min.js': ['dest/bundle.js']
}
}
}
});
grunt.loadNpmTasks('grunt-rollup');
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['rollup', 'uglify']);
};
Output file (dest/bundle.js)
'use strict';
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var Test$1 = function (_Base) {
inherits(Test$$1, _Base);
function Test$$1() {
var _ret;
classCallCheck(this, Test$$1);
var _this = possibleConstructorReturn(this, (Test$$1.__proto__ || Object.getPrototypeOf(Test$$1)).call(this));
return _ret = _this, possibleConstructorReturn(_this, _ret);
}
return Test$$1;
}(Test);
module.exports = Test$1;
//# sourceMappingURL=bundle.js.map
Terminal output
Output after running node dest/bundle.js.
/Users/christianjuth/Desktop/mb-problems/dest/bundle.js:67
}(Test);
^
ReferenceError: Test is not defined
at Object.<anonymous> (/Users/christianjuth/Desktop/mb-problems/dest/bundle.js:67:3)
at Module._compile (module.js:569:30)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:503:32)
at tryModuleLoad (module.js:466:12)
at Function.Module._load (module.js:458:3)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
The problem seems to be with the very end of bundle.js where }(Test); is looking for an undefined variable. As far as I can tell this is not a bug with my code. It seems to be an issue with how rollup is compiling the ES6.
