汇总创建未定义的变量

Question

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

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

class Base{

  constructor() {
    return this;  
  }
}

export default Test;

汇总入口点 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 = function (_Base) {
  inherits(Test$, _Base);

  function Test$() {
    var _ret;

    classCallCheck(this, Test$);

    var _this = possibleConstructorReturn(this, (Test$.__proto__ || Object.getPrototypeOf(Test$)).call(this));

    return _ret = _this, possibleConstructorReturn(_this, _ret);
  }

  return Test$;
}(Test);

module.exports = Test;

//# 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); 正在寻找未定义的变量。据我所知，这不是我的代码的错误。这似乎是 rollup 如何编译 ES6 的问题。

Answer 1

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

class Base{

  constructor() {
    return this;  
  }
}

export default Test;

...你在哪里定义了Test？您是说 export default Base 吗？

汇总创建未定义的变量

Rollup Creating Undefined Variable

rollup

node.js

gruntjs

ecmascript-6

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

汇总入口点 ES6 文件（src/test.js）：

Gruntfile.js

输出文件（dest/bundle.js）

终端输出