[英]Using DatePicker via TypeScript import and Webpack2
我正在尝试在TypeScript + React + Webpack2
设置中测试Ant设计组件。
我手动导入DatePicker
组件,以便webpack可以抓取它并将其构建到我的包中。
import * as React from "react";
import * as moment from "moment";
import DatePicker from 'antd/lib/date-picker';
import "antd/lib/date-picker/style/css";
export default class TestComponent extends React.Component<any, any> {
render(): JSX.Element {
return <DatePicker value={moment(new Date())} format={"YYYY.mm.dd."}/>;
}
}
但是当我尝试在浏览器中运行已编译的代码时,组件将不会呈现,因为特定的导入会编译到最终的代码中。
Object.defineProperty(exports, "__esModule", { value: true });
var React = __webpack_require__(4);
var moment = __webpack_require__(0);
var date_picker_1 = __webpack_require__(287);
__webpack_require__(289);
var TestComponent = (function (_super) {
__extends(TestComponent, _super);
function TestComponent() {
return _super !== null && _super.apply(this, arguments) || this;
}
TestComponent.prototype.render = function () {
return React.createElement(date_picker_1.default, { value: moment(new Date()), format: "YYYY.mm.dd." });
};
return TestComponent;
}(React.Component));
exports.default = TestComponent;
请注意date_picker_1.default
引用,该引用undefined
,并导致错误。
为什么会这样? 它不应该在导入的对象上调用default
,只需使用它,因为它是DateTimePicker
组件本身。
我有以下设置。 TypeScript使用commonjs
模块系统编译成es5
。 这是由awesome-typescript-loader
typescript awesome-typescript-loader
webpack加载器完成的。 其余的应该由webpack本身完成。
DateTimePicker确实有一个默认导出(请参见底部的lib / date-picker / index.js ),但是当TypeScript将其编译为commonjs模块时会出现某种问题。
Webpack 2开箱即可处理ES模块,因此您应该将导入保留为webpack。 只需将编译器选项module
更改为es6
。
"module": "es6"
您可以更改它而无需更改目标,因此它仍然输出es5
但不使用commonjs模块。 从TypeScript - 编译器选项 :
►定位“ES5”或更低时,可以使用“ES6”和“ES2015”值。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.