typescript 路径别名问题（别名设置 & 开发与打包时路径问题）

在TypeScript中，我们可以通过在tsconfig.json文件中设置paths和baseUrl来创建路径别名。这样可以在代码中使用别名来引用模块，从而使得代码更易于阅读和维护。

例如，如果你有以下目录结构：

project/
│
├── src/
│   ├── utils/
│   │   └── utils.ts
│   └── index.ts
│
└── tsconfig.json

你可以在tsconfig.json中这样设置别名：

{
  "compilerOptions": {
    "baseUrl": ".", // 这代表相对于此文件的位置
    "paths": {
      "utils/*": ["src/utils/*"] // 创建一个名为"utils"的别名，指向"src/utils"目录下的所有文件
    }
  }
}

在index.ts中，你可以使用别名来导入utils.ts中的内容：

// 使用别名导入
import { someFunction } from 'utils/utils';
 
// 或者使用别名路径导入文件
someFunction();

在开发环境中，你可能想要使用Webpack或其他打包工具，并通过别名在构建时重写路径。在这种情况下，你需要在你的Webpack配置中使用resolve.alias来设置别名，如下所示：

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

这样，在打包时Webpack会将utils这个别名解析为指定的路径，而在开发环境中，你可以继续使用TypeScript的别名特性。这样，无论是在开发还是打包构建时，你都可以使用同样的导入语句，而不需要修改任何代码。