从 TypeScript 中的根路径导入模块

Posted 2023-03-07

【中文标题】从 TypeScript 中的根路径导入模块

【英文标题】：Import module from root path in TypeScript

【发布时间】：2017-06-26 16:14:16

【问题描述】：

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

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 文件（在另一个项目中，但都相似）：

    "compilerOptions": 
        "module": "commonjs",
        "noImplicitReturns": true,
        "noImplicitThis": true,
        "noUnusedLocals": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "strictNullChecks": true,
        "target": "ES6"
    ,

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

【问题讨论】：

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 文件，它与导入路径无关。对不起！不知道你说的..是什么意思，我英语不太好：/。

请发布您的 tsconfig.json

@TeddySterne 已添加。

【参考方案1】：

我需要将baseUrl 和rootDir 都设置为指向我在tsconfig.json 中的src 文件夹

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

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

例如 import BreadCrumb from 'components/BreadCrumb'

【讨论】：

这适用于 vscode linting，tsc 可以很好地构建它，但是当我尝试运行编译后的代码时会得到module not found。

我只需要提供一个baseUrl。

不要忘记重新启动您的开发服务器以使其正常工作?

【参考方案2】：

仅作记录

如果你想从你的项目中使用绝对导入，不要使用/作为前缀，比如/src/config/cfg，直接使用src/config/cfg

正如https://***.com/a/46229294/7529562 指出的那样，/ 代表系统根，

tsc 会抱怨cannot find module

【讨论】：

这不是真的。 2017 年添加了支持 -> github.com/Microsoft/TypeScript/issues/19318

要获得像src/config/cfg 这样的路径为我工作，我必须在我的tsconfig.json 中提供baseUrl。

【参考方案3】：

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

使用compilerOptions.baseUrl 属性，我能够进行以下导入。这让我有一个完整的从根到预期的路径，这有助于我的代码维护，并且可以在任何文件中工作，与当前文件夹无关。以下示例将我的项目的 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') ]
    

【讨论】：

太棒了，回答但别忘了把 node_modules 也放在那里。

我发现包含部分是不必要的，甚至会尝试编译 node_modules 中的内容。我在 tsconfig 中设置了 baseUrl、rootDir、ouputDir。正如@EyalPerry 指出的那样，在webpack 中我添加了node_modules。似乎工作得很好。

我正在使用create-react-app 并且仅设置baseUrl 就足够了。谢谢！ ?

【参考方案4】：

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

import  './product/blah'

你的项目结构可能是

带有解释的其他可能选项

---

我有以下应用结构，我把它放在

C:\\Users\\(username)\\Documents\firstAngular2App

如屏幕截图所示。

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

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

import   from './'; 

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

import   from '../'; 

../../ 将引用根文件夹（Documents 文件夹）

import   from '../../'; 

../app/ 指的是应用程序文件夹，但它是从根目录(firstAngular2App)

import  from '../app/';

【讨论】：

感谢您的详细说明，但这并不是我想要的。我知道我可以使用 .. 和 ./ 标记进行相对导入，我的问题中还有一个示例。

你在找什么

我试图避免深度相对路径，我想从项目根目录指定相对路径，而不是当前文件根目录。例如，我的根目录现在是 src 文件夹。假设我有一个文件src/blah/Class.ts，其中import Export from 'export' 将引用src/Export.ts。我不想依赖 .. 或 ./ 令牌，不幸的是，它们让我几乎创建了一种新的编程语言来替代 TypeScript，它们让我的代码维护变得丑陋。

让我们continue this discussion in chat。

【参考方案5】：

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 定义 here。

【讨论】：

感谢根目录的假设，但是我仍然无法导入相对于其根目录的文件，因为 TypeScript 继续说导入模块不存在/找不到。我尝试过使用和不使用斜线，但没有，与./ 相同。

尝试将module切换为node

/ 总是指文件系统根目录。 More details