[英]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.