Question

我需要使用ES6中的babel.js编译我的API库。编译很好，但在简单调用new RichEditorApi（xx）之后;我收到错误：

TypeError: _richEditorApi.RichEditorApi is not a constructor

我试图找到答案，但我没有运气。

这是我的gulp任务：

    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";

Babel.js类不是构造函数

1 个答案: