webpack alias + typeScript来使用绝对路

如果你在你的react项目里面使用相对路径，那么有可能会出现下面这样的代码：

import Button from '../../../components/button/Button'

使用webpack的alias功能，可以使得我们不必使用相对路径,而是绝对路径。

如果你在项目里面使用了TypeScript，那么你还需要对tsconfig.json做相应的配置。

如果你使用了Jest，也需要对Jest做相关的配置。

所以接下来，我们依次给做三项配置：

一 webpack.config.js的相关配置

//projectName/config/webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      '@src': path.resolve(__dirname, '../src')
    }
  }
};

二 tsconfig.json

虽然我们在第一步里，通过webpack配置了一个alias，但是typeScript并不知道webpack的黑魔法。所以，在tsconfig.json中，我们在compilerOptions选项里面需要配置baseUrl和paths两个选项来告诉typeScript, 当你见到@src/*的时候，其实是map到src/*的。

//tsconfig.json
"compilerOptions": {
    //...
    "baseUrl": ".",
    "paths": {
        "@src/*": [
            "src/*"
        ]
    }
}

三 jest.config.js

同样的，我们也需要告诉Jest这个别名，这个可以通过jest的配置项里面的moduleNameMapper这个选项来完成。

//jest.config.js
{
//...
"moduleNameMapper": {
        "^@src/(.*)": "<rootDir>/src/$1"
    },
}

完成了以上三步的配置，我们就可以在代码里面使用@src了，之前的：

import Button from '../../../components/button/Button'

现在就可以变为：

import Button from '@src/components/button/Button'