Babel.js類不是構造函數

Question

我需要使用ES6中的babel.js編譯我的API庫。編譯很好，但在簡單地調用新的RichEditorApi（xx）之後;我得到錯誤：

TypeError: _richEditorApi.RichEditorApi is not a constructor 

我試圖找到答案，但我沒有運氣。

這是我的任務，一飲而盡：

gulp.task('buildAPI',() => { 
    return gulp.src('./src/components/**/api/*.js')   
     .pipe(babel({ 
      presets: ['es2015'] 
     })) 
     .on('error', console.error.bind(console))     
     .pipe(gulp.dest('./test/lib')); 
}); 

簡單編譯API：

/** 
* 
* @export 
* @class TextImageApi 
*/ 
export class RichEditorApi { 

    /** 
    * Creates an instance of RichEditorApi. 
    * 
    * @param {any} app 
    * @param {any} database 
    */ 
    constructor(app) { 
     this.app = app; 
     this.database = ""; 
    } 

    /** 
    * Register component API 
    */ 
    register() {     
     this.app.get('/cms/api/:sectionId', function (req, res, next) { 
      var sectionId = req.params.sectionId; 
      var data = this.database.loadComponentData(sectionId); 
      res.json(data); 
     }); 

     // REST API update component content 
     this.app.put('/cms/api/', function (req, res, next) { 

      var sectionId = req.body.sectionId; 
      var result = { 
       "data": { sectionId: sectionId } 
      } 

      var data = { 
       error : false, 
       message : "success", 
      }; 

      this.database.saveComponentData(result, (err) => { 
       if (err) { 
        data.error = true; 
        data.message = err; 
       } 
      }); 

      res.json(data); 
     }); 
    } 
} 

與Babel.js重新編譯如下所示：

'use strict'; 

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

var _createClass = function() { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 

/** 
* 
* @export 
* @class TextImageApi 
*/ 
var RichEditorApi = exports.RichEditorApi = function() { 

    /** 
    * Creates an instance of RichEditorApi. 
    * 
    * @param {any} app 
    * @param {any} database 
    */ 
    function RichEditorApi(app) { 
     _classCallCheck(this, RichEditorApi); 

     this.app = app; 
     this.database = ""; 
    } 

    /** 
    * Register component API 
    */ 


    _createClass(RichEditorApi, [{ 
     key: 'register', 
     value: function register() { 
      this.app.get('/cms/api/:sectionId', function (req, res, next) { 
       var sectionId = req.params.sectionId; 
       var data = this.database.loadComponentData(sectionId); 
       res.json(data); 
      }); 

      // REST API update component content 
      this.app.put('/cms/api/', function (req, res, next) { 

       var sectionId = req.body.sectionId; 
       var result = { 
        "data": { sectionId: sectionId } 
       }; 

       var data = { 
        error: false, 
        message: "success" 
       }; 

       this.database.saveComponentData(result, function (err) { 
        if (err) { 
         data.error = true; 
         data.message = err; 
        } 
       }); 

       res.json(data); 
      }); 
     } 
    }]); 

    return RichEditorApi; 
}(); 

所以，現在我想我RichEditorApi的簡單調用新實例：

import { RichEditorApi } from "./lib/richEditor/api/richEditorApi"; 
... 
//let richEditorApi = new RichEditorApi(app); 
//richEditorApi.register(); 
console.log(new RichEditorApi(app)); 

在此之後，我會得到這樣的：

> console.log(new _richEditorApi.RichEditorApi(app)); 
      ^

TypeError: _richEditorApi.RichEditorApi is not a constructor 
    at Object.<anonymous> (test.js:37:13) 
    at Module._compile (module.js:541:32) 
    at loader (/Users/petrtomasek/Projects/cmsComponents/node_modules/babel-register/lib/node.js:148:5) 
    at Object.require.extensions.(anonymous function) [as .js] (/Users/petrtomasek/Projects/cmsComponents/node_modules/babel-register/lib/node.js:158:7) 
    at Module.load (module.js:458:32) 
    at tryModuleLoad (module.js:417:12) 
    at Function.Module._load (module.js:409:3) 
    at Function.Module.runMain (module.js:575:10) 
    at /Users/petrtomasek/Projects/cmsComponents/node_modules/babel-cli/lib/_babel-node.js:160:24 
    at Object.<anonymous> (/Users/petrtomasek/Projects/cmsComponents/node_modules/babel-cli/lib/_babel-node.js:161:7) 

有什麼不對？ 謝謝

Answer 1

你有一噸的代碼出這是需要重現該問題很少，但圍繞其名稱括號導入類時，而不是沒有我得到了同樣的錯誤：

// TypeError: _richEditorApi.RichEditorApi is not a constructor 
import { RichEditorApi } from "./lib/.../richEditorApi"; 

// Try this instead, it may work: 
import RichEditorApi from "./lib/.../richEditorApi";