使用 TypeScript 时 webpack 中 alias 的设置

[yyzclyang]

在使用 TypeScript 时，如果想使用 alias 来进行路径解析，以便于 import 时方便路径的书写，那要怎么做呢？

我们第一时间会想到在 webpack 中这样设置：

resolve: {
    alias: {
      ROOT: require('path').resolve(__dirname)
    }
  }

这样就可以用 ROOT 代替根路径，方便 import 时少写几层 ../。

但是在实际使用时，会出现 Cannot find module 'ROOT' 的情况，比如这样引用：

import { Icon } from 'ROOT/lib';

编辑器就会报错：

webpack 也会出现这样的错误：

这是因为使用 TypeScript 时，除了在 webpack 中设置 alias，同时也要在 tsconfig 中设置一下。

我们在 tsconfig 中加入这么一段。

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "ROOT/*": ["./*"]
    }
}

这样一来就能正常的使用 import from 'ROOT/*' 了。