Question

我正在尝试在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使用es5模块系统编译为commonjs。这是由awesome-typescript-loader webpack加载器完成的。其余的应该由webpack本身完成。

Answer 1

DateTimePicker确实有默认导出（请参见底部的lib/date-picker/index.js），但是当TypeScript将其编译为commonjs模块时会出现某种问题。

Webpack 2开箱即用处理ES模块，因此您应该将导入保留为webpack。只需将编译器选项module更改为es6。

"module": "es6"

您可以更改它而无需更改目标，因此它仍会输出es5但不使用commonjs模块。来自TypeScript - Compiler Options：

►＆＃34; ES6＆＃34;和＆＃34; ES2015＆＃34;在定位＆＃34; ES5＆＃34;时可以使用这些值或更低。

通过TypeScript导入和Webpack2使用DatePicker

1 个答案: