如何tsconfig.json

Question

我读tsconfig.json约path-mapping使用路径，我想用它来避免使用以下丑陋路径：

项目组织是有点不可思议，因为我们有一个包含项目和库的单一存储库。这些项目按公司和浏览器/服务器/通用进行分组。

如何我可以配置tsconfig.json的路径，以便代替：

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

我可以使用：

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

威尔东西在的WebPack配置其他要求？或者是tsconfig.json就够了？

Answer 1

这可以建立在你的tsconfig.json文件，因为它是一个TS功能。

你可以这样做：

"compilerOptions": { 
     "baseUrl": "src", // This must be specified if "paths" is. 
     ... 
     "paths": { 
      "@app/*": ["app/*"], 
      "@config/*": ["app/_config/*"], 
      "@environment/*": ["environments/*"], 
      "@shared/*": ["app/_shared/*"], 
      "@helpers/*": ["helpers/*"] 
     }, 
     ... 

有想法是要参考的路径，它需要你的baseUrl为你指着路线的基础，作为描述它的强制性文件。

字符'@'不是强制性的。

后您设置的那个样子，你可以轻松地使用它像这样：

import { Yo } from '@config/index'; 

您可能会注意到的唯一的事情是，智能感知不会在目前的最新版本的工作，所以我会建议遵循用于导入/导出文件的索引约定。

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Answer 2

如果我没有弄错，./表示从文件的当前目录开始，而/表示从根开始。因此，您可以用/

Answer 3

替换所有../ s您可以使用baseUrl和pathsdocs的组合。

假设根是在最上面的src目录（和我读了你的形象正确地）使用

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

对于webpack你可能还需要添加module resolution。对于webpack2这可能看起来像

// webpack.config.js 
module.exports = { 
    resolve: { 
     ... 
     modules: [ 
      ... 
      './src/org/global' 
     ] 
    } 
} 

Answer 4

如果打字稿+的WebPack 2 +在装载机正在被使用，有一个附加的步骤（@ 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 } */) 
    ] 
} 

Advanced path resolution in TypeScript 2.0

Answer 5

检查此类似的解决方案，带星号

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