从TypeScript中的根路径导入模块

假设我有一个项目，它的主要源目录是：

C:\product\src

基于此目录，每个导入路径都将与其相对。即，假设：

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '/com/name/product/thing';

同：

// Current script: C:\product\src\com\name\product\blah.ts

import { thing } from '../../../com/name/product/thing';

我的条目编译文件位于：

C:\product\src

比如说。那么，有没有办法在编译器选项中指定这样的入口路径（

C:\product\src

？我需要在

tsconfig.json

文件中指定这一点，因为我将使用webpack

我已经尝试了上面的示例，但是TypeScript说找不到请求的模块：

// Current script: A.ts

import { B } from '/com/B';


// Current script: B.ts

export const B = 0;

我的tsconfig.json文件（在另一个项目中，但两者相似）：

---

TypeScript导入使用路径开头的

/

来表示根目录。要导入相对于当前文件的文件，请取消初始斜杠或使用

/

// Current script: C:\product\src\com\name\product\blah.ts
import { thing } from './com/name/product/thing';

默认情况下，TypeScript编译器假定项目的根与tsconfig.json的位置相同

您可以通过在tsconfig中指定

compilerOptions

属性的

rootDir

属性来指定新的根

---

有关所有可用特性设置的列表，请参阅找到的tsconfig定义

您在thing.ts中的导入语句的解决方案将是

import {} './product/blah'

您的项目结构可能如下所示

其他可能的选择及解释

---

我有以下应用程序结构，并将其放置在

C:\\Users\\（username）\\Documents\firstAngular2App

如截图所示

我正在将组件作为导入到app.module.ts

/将显示当前文件夹（应用程序）

。/将引用根文件夹（firstAngular2App master）

。/../将引用根文件夹（文档文件夹）

。/app/引用应用程序文件夹，但它是从根目录引用的（firstAngular2App）

（重新发布我的答案以避免小狗插口。）

使用该属性，我可以执行以下导入操作。这允许我拥有一个完整的根目录到预期路径，这有助于我的代码维护，并且可以独立于当前文件夹在任何文件中工作。下面的示例将我的项目的src文件夹作为模块根目录

重要提示：此baseUrl属性不会影响条目webpack文件（至少对我而言？），因此请使用此示例在src文件夹中分离一个主文件，并从条目（即，

import{main}from./src/main'；new main；

）运行一次

// browser: directory inside src;
//   * net: A TS file.
import { URLRequest } from 'browser/net';

tsconfig.json示例：

{
    "compilerOptions": {
        "baseUrl": "./src",
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

但是，它不会直接与webpack一起工作。在webpack选项中也必须执行相同的操作。这是webpack 2中的工作原理：

module.exports = {
  ...
  , resolve: {
      ...
      , modules: [ path.join(__dirname, './src') ]
    }
}

---

我需要将

baseUrl

和

rootDir

设置为指向

tsconfig.json中的src文件夹

{
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": "./src",
  ...
}

然后，我可以导入.tsx文件，而不需要前缀“/”或相对路径

e、 g。
从“组件/面包屑”导入面包屑
仅用于记录

如果您想从项目中使用绝对导入，请不要使用
/
作为前缀，例如
/src/config/cfg
，只使用as
src/config/cfg

如上所述，
/
代表系统根

tsc
将投诉
找不到模块
C:\product\src
+
。/../com/name/product/thing
不是
C:\product\src\com\name\product\blah.ts
。我错过什么了吗？您想禁止
。
打开某个根目录？@TomášHübelbauer
/C:\product\src\com\name\product\blah.ts
注释意味着以下带有导入声明的脚本是blah.ts文件，它与导入路径无关。Sry！不知道你所说的
是什么意思。
，我的英语不是很好：/。请发布你的tsconfig。json@TeddySterne添加了。感谢使用根目录，但是我仍然无法导入相对于其根目录的文件，因为TypeScript继续说导入模块不存在/找不到。我尝试过使用斜杠和不使用斜杠，但没有任何效果，与
/
相同。尝试将
模块
切换到
节点
到目前为止没有成功：/<代码>/

始终引用文件系统根目录。谢谢你的详细说明，但是这并不是我想要的。我知道我可以使用

。

和

/

标记进行相对导入，我的问题中还有一个例子。您在寻找什么我正在尝试避免深度相对路径，我希望从项目根指定相对路径，而不是通过当前文件根指定相对路径。例如，我的根目录现在是src文件夹。假设我有一个文件

src/blah/Class.ts

，其中

import{Export}来自“Export”

将引用

src/Export.ts

。我不想依赖

。

或

/

令牌，不幸的是，它们几乎让我创建了一种新的编程语言来取代TypeScript，它们让我的代码维护变得丑陋。我有了一个解决方案，但无论如何感谢您的帮助和合作！如果是这样的话，请在fb@aravind2109Awesome中联系我，回答，但别忘了在那里放置node_模块。我发现include部分不必要，甚至会尝试编译node_模块中的内容。我在tsconfig中设置了baseUrl、rootDir、ouputDir。正如@EyalPerry所指出的，我在网页中添加了node_模块。似乎工作得很好。我正在使用

create-react-app

，只设置

baseUrl

就足够了。谢谢这不是真的。2017年添加了支持->为了获得像

src/config/cfg

这样的路径来为我工作，我必须在我的

tsconfig.json

中提供一个

baseUrl

。这在vscode linting中工作，

tsc

将构建它

import {} from '../app/';

// browser: directory inside src;
//   * net: A TS file.
import { URLRequest } from 'browser/net';

{
    "compilerOptions": {
        "baseUrl": "./src",
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    },

    "include": [
        "./src/**/*.ts",
        "./src/**/*.d.ts"
    ]
}

module.exports = {
  ...
  , resolve: {
      ...
      , modules: [ path.join(__dirname, './src') ]
    }
}

{
  "compilerOptions": {
    "baseUrl": "./src",
    "rootDir": "./src",
  ...
}