在 TypeScript 中，构建 dist 文件夹时使模块别名起作用的正确配置是什么？

Question

我正在试验打字稿的模块别名，它在

dev

期间工作，但是当我尝试构建它时，我总是找不到模块，因为它甚至在构建时也指向

src

文件。

我尝试将

dist

中的

moduleAliases

替换为

package.json

。但是，当我运行

yarn run dev

时，它已编译，它使用

dist

文件夹源代码而不是我的

src

。我还尝试将

tsconfig-paths

引入我的

dev

，例如

"dev": "NODE_ENV=development ts-node -r tsconfig-paths/register ./src/index.ts",

，但系统仍在读取

moduleAliases

。也许这里有人在做模块路径时遇到了类似的问题。

这是我的项目结构：

|-project
|---src
|-------index.ts  // (where I put require('module-alias/register');)
|-------app (business logic) // where I start using modules e.g import config from '@config/index.config';
|-----------index.ts
|-----------routes
|-------config
|---dist
|---node_modules
|---.env
|---.eslintrc
|---package.json
|---tsconfig.json
|---yarn.lock

我的片段

package.json

"main": "dist/index.js",
"types": "dist/index.d.ts",
"scripts": {
  "dev": "NODE_ENV=development ts-node-dev --respawn --transpileOnly ./src/index.ts",
  "prod": "yarn run build && node -r ./dist/index.js",
  "build": "NODE_ENV=production yarn run build-ts",
  "build-ts": "tsc -p .",
},  
"_moduleAliases": {
  "@config": "./src/config",
  "@routes": "./src/app/routes",
},

我的

tsconfig.json

{
  "compilerOptions": {
    "incremental": true,
    "target": "es6",
    "module": "commonjs",
    "declaration": true,
    "sourceMap": true,
    "outDir": "./dist",
    "removeComments": true,
    "strict": true,
    "strictNullChecks": true,
    "strictFunctionTypes": true,
    "noUnusedLocals": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "suppressImplicitAnyIndexErrors": true,
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "@config/*": ["config/*"],
      "@routes/*": ["app/routes/*"],
    },
    "allowSyntheticDefaultImports": true, 
    "esModuleInterop": true 
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

我的

.eslintrc

（不确定这是否重要或与这个问题相关）

{
  "extends": ["airbnb-typescript/base"],
  "rules": {
    "import/prefer-default-export": 0
  },
  "settings": {
    "import/resolver": {
      "babel-module": {}
    }
  }
}

我如何使用它

import config from '@config/index.config';

非常感谢。

Answer 1

目前，任何包在构建到 dist 或其他文件夹时都不需要在 typescript 中使用别名。

在 tsconfig.json 中，您需要设置 baseUrl、paths 和 outDir 以及其他一些设置。

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "baseUrl": "./src",
    "paths": {
      "#config/*": ["./config/*"],
      "#routes/*": ["./routes/*"]
    },
    "outDir": "./dist",
    "isolatedModules": true,    
    "esModuleInterop": true    
  },
  "include": ["src/**/*"],
  "exclude": [
    "node_modules"
  ],
  "ts-node": {
    // Tell ts-node CLI to install the --loader automatically
    "esm": true
  }
}

然后在package.json中你需要设置imports指令

  "main": "dist/index.js",
  "imports": {
    "#config/*": "./dist/config/*",
    "#routes/*": "./dist/routes/*"
  },

然后您可以使用带有别名符号（#）的导入。确保在 ts 文件导入中使用 .js 扩展名，这是构建成功运行所必需的。

-src/config/config.ts
-src/routes/index.ts

// use imports everywhere in your project
import { some_option } from '#config/config.js';
import routes from '#routes/index.js';