彙總創建未定義的變量

Question

我想用一個grunt彙總插件grunt-rollup將兩個es6文件編譯成可以從節點運行並最終在瀏覽器中運行的Javascript。目前，它編譯，但彙總似乎是從我的一個類名創建一個未定義的變量。這是我目前的配置。

進口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$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？