如何将TypeScript项目自定义模块的导入简化为类库式导入？

问题背景 #

项目结构 #

─project
    ├───content
    │       content.ts
    │
    └───modules
        └───api
            └───service
                    service.ts

现有代码 #

content.ts中定义常量：

const OFFSET = 10

目前service.ts只能用相对路径导入：

import { OFFSET } from '../../../content/content'

需求 #

希望把导入简化成类似外部库的写法：

import { OFFSET } from 'content'

就像导入第三方库时的写法：

import { Modal, Heading } from 'flowbite-svelte'

具体配置方案 #

根据项目使用的构建工具，选择对应的配置方式：

1. Vite 项目 #

在项目根目录的vite.config.ts（或.js）中添加别名配置：

import { defineConfig } from 'vite'
import path from 'path'

export default defineConfig({
  resolve: {
    alias: {
      // 直接映射到content.ts文件
      'content': path.resolve(__dirname, './content/content.ts')
      // 若要映射整个content目录（方便导入目录下其他文件），改为：
      // 'content': path.resolve(__dirname, './content')
    }
  }
})

同时修改tsconfig.json，让TypeScript识别该别名：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "content": ["./content/content.ts"]
      // 映射目录对应改为：
      // "content/*": ["./content/*"]
    }
  }
}

2. Webpack 项目 #

在webpack.config.js中配置别名：

const path = require('path');

module.exports = {
  // 保留原有其他配置
  resolve: {
    alias: {
      'content': path.resolve(__dirname, './content/content.ts')
      // 映射目录改为：
      // 'content': path.resolve(__dirname, './content')
    }
  }
};

同样需要在tsconfig.json中添加上述paths配置，保证TypeScript语法检查正常。

3. 纯TypeScript项目（无构建工具） #

直接修改tsconfig.json：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "content": ["./content/content.ts"]
    }
  }
}

如果用ts-node运行项目，需额外安装tsconfig-paths包，启动命令改为：ts-node -r tsconfig-paths/register 你的入口文件.ts。

4. SvelteKit 项目 #

在svelte.config.js中通过Vite配置项添加别名：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  plugins: [sveltekit()],
  resolve: {
    alias: {
      'content': path.resolve(__dirname, './content/content.ts')
    }
  }
});

同时在tsconfig.json中添加对应的paths配置即可。

内容的提问来源于stack exchange，提问作者Viewed