我正在阅读tsconfig中的路径映射。json,我想用它来避免使用以下丑陋的路径:

项目组织有点奇怪,因为我们有一个包含项目和库的单一存储库。项目按公司和浏览器/服务器/通用进行分组。

如何配置tsconfig中的路径?Json,而不是:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

我可以使用:

import { Something } from "lib/src/[browser/server/universal]/...";

webpack配置中还需要其他东西吗?或者是tsconfig。json足够了吗?


当前回答

/只从根目录开始,为了获得相对路径,我们应该使用./或../

其他回答

用星号检查类似的解决方案

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },

如果typescript + webpack 2 + at-loader正在使用,有一个额外的步骤(@mleko的解决方案只部分适用于我):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

TypeScript 2.0中的高级路径解析

使用这个检出编译器操作

我在文件中添加了baseUrl项目如下:

“baseUrl " src "

它工作得很好。因此,为项目添加基本目录。

Alejandros的答案对我有用,但是当我在webpack 4中使用awesome-typescript-loader时,我还必须在我的webpack中添加tsconfig-paths-webpack-plugin。配置文件以正确解析

确保你有 ` { “compileOnSave”:没错, " compilerOptions ": { "路径":{ “@styles /”:(“资产/ scss /”) } }, }

` 这给我带来了麻烦。