通過TypeScript導入和Webpack2使用DatePicker

我試圖在TypeScript + React + Webpack2設置中測試Ant設計組件。通過TypeScript導入和Webpack2使用DatePicker

我正在手動導入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 webpack加載器完成。其餘的應該由webpack自己完成。

來源

2017-04-13 Zoltán Tamási

DateTimePicker確實有一個默認導出（請參見底部的lib/date-picker/index.js），但是當TypeScript將其編譯到commonjs模塊時會出現某種問題。

Webpack 2開箱即用地處理ES模塊，因此您應該將導入保留爲webpack。只需將編譯器選項module更改爲es6即可。

"module": "es6"

可以更改，而無需改變你的目標，所以它仍然輸出es5但不使用CommonJS的模塊。來自TypeScript - Compiler Options：

►當定位「ES5」或更低時，可以使用「ES6」和「ES2015」值。

來源

2017-04-13 22:12:33

通過TypeScript導入和Webpack2使用DatePicker

回答

相關問題