汇总创建未定义变量

Question

我正在尝试使用grunt汇总插件grunt-rollup将两个es6文件编译成Javascript，这些文件可以从节点运行，最终运行在浏览器中。目前，它编译，但汇总似乎是从我的一个类名创建一个未定义的变量。这是我目前的配置。

导入的ES6文件（src / base.js）：

class Base{

  constructor() {
    return this;  
  }
}

export default Test;

Rollup Entrypoint ES6文件（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']);

};

输出文件（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

终端输出

运行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

问题似乎是在bundle.js的最后，}(Test);正在寻找一个未定义的变量。据我所知，这不是我的代码的错误。这似乎是汇总编译ES6的一个问题。

Answer 1

那是因为你的代码中有一个未定义的变量。再看看base.js：

class Base{

  constructor() {
    return this;  
  }
}

export default Test;

...你在哪里定义Test？您的意思是export default Base吗？