提醒:本文发布于 3 年前 ,文中所描述的信息可能已发生改变,请谨慎使用。

编译构建使用 awesome-typescript-loader 进行编译。
tsconfig 参数需要指定

{
  "compilerOptions": {
    "module": "es2015", // 注意,需要保留 es2015 的 import 语法供 babel 转
    "target": "es2015",
    "moduleResolution": "node",  // es2015 需要指定 node
    "noImplicitAny": false,
    "sourceMap": false,
    "jsx": "preserve",
    "experimentalDecorators": true,
    "skipDefaultLibCheck": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "lib": [
      "dom",
      "es5",
      "es2015",
      "es2016",
      "es2017"
    ]
  },
  "awesomeTypescriptLoaderOptions": {
    "useWebpackText": true,
    "useCache": true,
    "useBabel": true
  }
}

这样才能保证

import Button from 'antd/lib/button`

时不会报 undefined 的错误。

简单原因分析,antd 子模块是 ES2015 模块标准,如果使用 ts 编译为 const Button = require('antd/lib/button').default 之后 babel 再次编译,webpack 会把模块当 commonjs 模块去解析,最后的结果会变成 const Button = require('antd/lib/button').default.default 就挂了