Verwendung von DatePicker über TypScript-Import und Webpack2

Question

Ich versuche Ant Design-Komponenten innerhalb einer TypeScript + React + Webpack2 Setup zu testen.

Ich importiere die DatePicker Komponente manuell, so dass das Webpack es auspacken und in mein Bundle einbauen kann.

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."}/>; 
    } 
} 

Aber wenn ich versuche, den kompilierten Code im Browser ausgeführt wird, wird die Komponente nicht machen, da der besondere Import in diesen letzten Code kompiliert.

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; 

Bitte beachten Sie die date_picker_1.default Referenz, die undefined, und bewirkt, dass der Fehler ist.

Warum passiert das? Es sollte default für das importierte Objekt nicht aufrufen, verwenden Sie es einfach, da es die DateTimePicker Komponente selbst ist.

Ich habe folgendes Setup. TypeScript wird unter Verwendung des commonjs Modulsystems in es5 kompiliert. Dies geschieht durch den Webpack Loader awesome-typescript-loader. Der Rest sollte von Webpack selbst erledigt werden.

Answer 1

Die DateTimePicker hat einen Standard-Export (siehe lib/date-picker/index.js am unteren Rand), aber wenn TypeScript kompiliert es zu einem commonjs-Modul gibt es eine Art von Problem.

Mit dem Webpack 2 können ES-Module sofort verwendet werden. Daher sollten Sie die Importe stattdessen dem Webpack überlassen. Ändern Sie einfach die Compiler-Option module zu es6.

"module": "es6" 

Sie können das ändern, ohne Ihr Ziel ändern zu müssen, so gibt sie noch es5 aber nicht verwendet Commonjs Module. Von der TypeScript - Compiler Options:

► "ES6" - und "ES2015" -Werte können verwendet werden, wenn auf "ES5" oder niedriger abgezielt wird.