Javascript Babel不再对Typescript 1.8应用“InteroPrequiredFault”

我刚刚将我的Typescript编译器升级到新的1.8版本，现在遇到了一个问题，即当我尝试导入时，我在带有默认导出的定义文件中定义的模块是“未定义”的

我回到了1.7.5，一切正常，所以它必须与新模块的导出方式有关。我使用webpack->typescript ES6模块->babel进行编译。我比较了从babel升级之前和之后的输出，在输出中有相当多的差异，但最值得注意的是缺少包装我的导入的InteroprequiredFault函数

从定义文件（works）中：

Typescript 1.7.5->Babel的输出：

function(module, exports, __webpack_require__) {

"use strict";

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; }; }();

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

var _ractive = __webpack_require__(212);

var _ractive2 = _interopRequireDefault(_ractive);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, Promise, generator) {
    return new Promise(function (resolve, reject) {
        generator = generator.call(thisArg, _arguments);
        function cast(value) {
            return value instanceof Promise && value.constructor === Promise ? value : new Promise(function (resolve) {
                resolve(value);
            });
        }
        function onfulfill(value) {
            try {
                step("next", value);
            } catch (e) {
                reject(e);
            }
        }
        function onreject(value) {
            try {
                step("throw", value);
            } catch (e) {
                reject(e);
            }
        }
        function step(verb, value) {
            var result = generator[verb](value);
            result.done ? resolve(result.value) : cast(result.value).then(onfulfill, onreject);
        }
        step("next", void 0);
    });
};

var Main = function () {
    function Main() {
        _classCallCheck(this, Main);

        this._rendered = false;
        this.ractive = new _ractive2.default({
            el: null,
            append: true,
            template: __webpack_require__(213),
            transitions: {
                fade: __webpack_require__(214)
            }
        });
    }

    _createClass(Main, [{
        key: "enable",
        value: function enable() {
            if (this._rendered) {
                return;
            }
            this._rendered = true;
            return this.ractive.render("body");
        }
    }, {
        key: "disable",
        value: function disable() {
            if (!this._rendered) {
                return;
            }
            this._rendered = false;
            return this.ractive.unrender();
        }
    }, {
        key: "rendered",
        get: function get() {
            return this._rendered;
        }
    }]);

    return Main;
}();

var m = new Main();
exports.default = m;

我不确定更新的Typescript版本是什么导致了Babel输出的剧烈变化

这是原始的打字稿

import Ractive from "ractive";

class Main {

    private ractive: Ractive.Ractive;

    private _rendered: boolean = false;

    constructor() {
        this.ractive = new Ractive({
            el: null,
            append: true,
            template: require("./main.mustache"),
            transitions: {
                fade: require<Ractive.TransitionPlugin>("ractive-transitions-fade")
            }
        });
    }

    public get rendered() {
        return this._rendered;
    }

    public enable() {
        if (this._rendered) {
            return;
        }
        this._rendered = true;
        return this.ractive.render("body");
    }

    public  disable() {
        if (!this._rendered) {
            return;
        }

        this._rendered = false;
        return this.ractive.unrender();
    }
}

let m = new Main();

export default m;

从“Ractive”导入Ractive；
班长{
私人的，有吸引力的：有吸引力的，有吸引力的；
private _rendered:boolean=false；
构造函数（）{
this.ractive=新的ractive({
el:空，
附加：对，
模板：require（“./main.mustache”），
过渡：{
淡入淡出：需要（“淡入淡出淡入淡出”）
}
});
}
公共获取呈现（）{
归还这个；
}
公共启用（）{
如果（这一点）{
返回；
}
这是真的；
返回此.ractive.render（“主体”）；
}
公共禁用（）{
如果（！this.\u渲染）{
返回；
}
这个._rendered=false；
返回此.ractive.unender（）；
}
}
设m=newmain（）；
导出默认值m；

---

感谢您的帮助。谢谢

我修复了它，结果是我的ts加载程序对于webpack来说已经过时了，并且导致了一些问题。更新到0.8.1解决了这个问题。

TS 1.7.5与TS 1.8.7（我认为是最新版本）的编译输出有什么不同？如果这里是TS的错，那么在Babel处理代码之前查看TS输出中的差异是有意义的。这是不可思议的。两个输出相同。然而，工作输出和非工作输出之间的唯一区别是typescript版本。是的，这很奇怪。显然，Babel将处理相同的文件：）关于某些软件包使用的TypeScript版本，可能在您的构建过程中发生了一些奇怪的事情？我完全迷路了。我对两个版本的tsc的输出进行了比较，结果都是一样的。这怎么可能呢。

function(module, exports, __webpack_require__) {

    "use strict";

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

    var ractive_1 = __webpack_require__(212);

    var Main = function () {
        function Main() {
            _classCallCheck(this, Main);

            this._rendered = false;
            this.ractive = new ractive_1.default({
                el: null,
                append: true,
                template: __webpack_require__(213),
                transitions: {
                    fade: __webpack_require__(214)
                }
            });
        }

        _createClass(Main, [{
            key: "enable",
            value: function enable() {
                if (this._rendered) {
                    return;
                }
                this._rendered = true;
                return this.ractive.render("body");
            }
        }, {
            key: "disable",
            value: function disable() {
                if (!this._rendered) {
                    return;
                }
                this._rendered = false;
                return this.ractive.unrender();
            }
        }, {
            key: "rendered",
            get: function get() {
                return this._rendered;
            }
        }]);

        return Main;
    }();

    var m = new Main();
    exports.default = m;

ractive_1.default is not a function

import Ractive from "ractive";

class Main {

    private ractive: Ractive.Ractive;

    private _rendered: boolean = false;

    constructor() {
        this.ractive = new Ractive({
            el: null,
            append: true,
            template: require("./main.mustache"),
            transitions: {
                fade: require<Ractive.TransitionPlugin>("ractive-transitions-fade")
            }
        });
    }

    public get rendered() {
        return this._rendered;
    }

    public enable() {
        if (this._rendered) {
            return;
        }
        this._rendered = true;
        return this.ractive.render("body");
    }

    public  disable() {
        if (!this._rendered) {
            return;
        }

        this._rendered = false;
        return this.ractive.unrender();
    }
}

let m = new Main();

export default m;