我刚刚将我的Typescript编译器升级到新的1.8版本,现在我遇到的问题是,当我尝试导入时,我在定义文件中定义的具有默认导出的模块是“未定义的”。
我恢复到1.7.5并且一切正常,所以它必须与新模块的导出方式有关。我使用webpack - >打字稿ES6模块 - >巴贝尔编译。我比较了babel升级前后的输出,输出有很多差异,但最值得注意的是缺少interopRequireDefault函数包装我的导入。
从定义文件(作品):
// used for require()
declare module "ractive" {
const ractive: Ractive.Static;
export {ractive as default};
}
Typescript 1.7.5的输出 - >巴别:
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的输出发生剧烈变化。
这是原始的Typescript
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;
感谢任何帮助。感谢
答案 0 :(得分:0)
我修复了它,事实证明我的ts-loader已经过时了webpack,并且导致了问题。更新到0.8.1解决了它。