Babel 不再将 _interopRequireDefault 与 Typescript 1.8 一起应用

Question

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

我恢复到 1.7.5 并且一切正常，所以它必须与新模块的导出方式有关。我使用 webpack -> typescript ES6 Modules -> babel 进行编译。我比较了从 babel 升级前后的输出，输出有不少差异，但最值得注意的是缺少包装我的导入的 interopRequireDefault 函数。

来自定义文件（作品）：

// used for require()
declare module "ractive" {
    const ractive: Ractive.Static;
    export {ractive as default};
}

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 更新到 1.8.0 后的输出

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

我不确定较新的 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;

感谢任何帮助。谢谢

Answer 1

我修复了它，结果发现我的 ts-loader 对于 webpack 来说已经过时了，并且导致了一些问题。更新到 0.8.1 解决了。