我正在尝试在 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;
请注意 date_picker_1.default
引用,它是未定义
,并且会导致错误。
为什么会发生这种情况?它不应该在导入的对象上调用 default
,而只需使用它,因为它是 DateTimePicker
组件本身。
我有以下设置。 TypeScript 使用 commonjs
模块系统编译为 es5
。这是由 awesome-typescript-loader
webpack 加载器完成的。其余的应该由 webpack 自己完成。
最佳答案
DateTimePicker 确实有默认导出(请参阅底部的 lib/date-picker/index.js),但是当 TypeScript 将其编译为 commonjs 模块时,会出现某种问题。
Webpack 2 开箱即用地处理 ES 模块,因此您应该将导入留给 webpack。只需将编译器选项 module
更改为 es6
。
"module": "es6"
您可以更改它,而无需更改目标,因此它仍然输出 es5
但不使用 commonjs 模块。来自 TypeScript - Compiler Options :
► "ES6" and "ES2015" values may be used when targeting "ES5" or lower.
关于javascript - 通过 TypeScript 导入和 Webpack2 使用 DatePicker,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43399584/