TypeScriptインポートとWebpack2でDatePickerを使用

Question

TypeScript + React + Webpack2セットアップ内でAnt Designコンポーネントをテストしようとしています。

私は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; 

undefinedで、エラーの原因となるdate_picker_1.default参照し、注意してください。

どうしてですか？インポートされたオブジェクトのdefaultは、DateTimePickerコンポーネントそのものであるため、呼び出すべきではありません。

次の設定があります。 TypeScriptはcommonjsモジュールシステムを使用してes5にコンパイルされます。これはawesome-typescript-loaderウェブパックローダーによって行われます。残りはwebpack自体で行う必要があります。

Answer 1

DateTimePickerにはデフォルトの書き出しがあります（下部にlib/date-picker/index.jsを参照してください）。しかし、TypeScriptでcommonjsモジュールにコンパイルすると、何らかの問題が発生します。

Webpack 2はESモジュールをそのまま使用できるため、代わりにwebpackにインポートする必要があります。単にコンパイラオプションmoduleをes6に変更してください。

"module": "es6" 

それはまだes5を出力しますがcommonjsモジュールを使用しないようにするには、あなたのターゲットを変更することなく、それを変更することができます。 TypeScript - Compiler Options：

►「ES5」以下をターゲットに設定する場合は、「ES6」と「ES2015」の値を使用できます。