TypeScript 가져 오기 및 Webpack2를 통해 DatePicker 사용

TypeScript + React + Webpack2 설정 내에서 Ant Design 구성 요소를 테스트하려고합니다.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;

는 undefined하고, 오류를 발생시키는 date_picker_1.default 참조를, 유의하시기 바랍니다.

왜 이런 일이 발생합니까? 가져온 객체에서 default을 호출하지 말고 DateTimePicker 구성 요소 자체이므로 그대로 사용하십시오.

다음과 같은 설정이 있습니다. TypeScript는 commonjs 모듈 시스템을 사용하여 es5으로 컴파일됩니다. 이 작업은 awesome-typescript-loader 웹팩 로더에서 수행합니다. 나머지는 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 사용

답변

관련 문제