webpack+typeScript如何使用绝对路径

当我们在开发项目是，如果使用相对路径，那么就会出现类似如下的代码：

import Button from '../../../../components/upload/Upload'

很显然，这样的路径很长，如果组件层次很深，那么相对路径就会很长，因此这种情况下很有必要使用绝对路径。

在wepack中，使用alias功能，可以使得我们使用绝对路径。

 webpack.config.js的相关配置如下：

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

如果你的项目里面使用了typeScript，并且仅仅只配置了wepack的绝对路径，那么你的项目很可能会出现如下错误：

Cannot find module '@src/context' or its corresponding type declarations.  TS2307

这表示typeScript并不认识webpack的配置的绝对路径。

所以，在tsconfig.json中，我们在compilerOptions选项里面需要配置baseUrl和paths两个选项来告诉typeScript, 当见到@src/*的时候，将地址映射到src/*。

tsconfig.json的配置如下：

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

如果你使用了jest，也需要对jest做相关的配置，告诉jest这个别名，这个可以通过jest的配置项里面的moduleNameMapper选项来完成。

jest.config.js 的配置如下：

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

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

现在我们的引用应该会成为这样：

import Button from '@src/components/upload/Upload'