从 TypeScript 中的根路径导入模块

Import module from root path in TypeScript

提问by

Let's suppose I've a project, and its main source directory is:

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

C:\product\src

Based on this directory, every import path would be relative to it. I.e., suppose:

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

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

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

same as:

与...一样：

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

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

My entry compilation file would be at:

我的入口编译文件位于：

C:\product\src

for instance. So, is there a way to specify this such entry path (C:\product\src, for example) at the compiler options? I need to specify this in the tsconfig.jsonfile, because I'll use webpack.

例如。那么，有没有办法C:\product\src在编译器选项中指定这种入口路径（例如）？我需要在tsconfig.json文件中指定它，因为我将使用 webpack。

I've tried my above example, but TypeScript says the requested module cannot be found:

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

// Current script: A.ts

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


// Current script: B.ts

export const B = 0;

My tsconfig.json file (inside another project, but both similiar):

我的 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"
    ]
}

采纳答案by

(Re-posting my answer to avoid puppy-socket.)

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

Using the compilerOptions.baseUrlproperty I was able to do the below import. This allowed me to have a complete root-to-expected-path, which helps my code maintainance, and works in any file, independently of the current folder. The below examples will have the src folder of my project as the modules root.

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

Important advice: this baseUrl property doesn't affect the entry webpack file (at least for me?), so separate a main file inside the src folder with this example, and run it from the entry (i.e., import { Main } from './src/Main'; new Main;), only once.

重要建议：这个 baseUrl 属性不会影响入口的 webpack 文件（至少对我来说？），所以用这个例子在 src 文件夹中分离一个主文件，并从入口（即，import { Main } from './src/Main'; new Main;）运行它，只运行一次。

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

tsconfig.jsonexample:

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"
    ]
}

However, it won't directly work with webpack. The same thing must be done at the webpack options. This is how it worked in webpack 2:

但是，它不会直接与 webpack 一起使用。同样的事情必须在 webpack 选项中完成。这就是它在 webpack 2 中的工作方式：

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

回答by Damian Green

I needed to set both baseUrland rootDirto point to my src folder in tsconfig.json{ "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... } I could then import .tsx files without needing a prefixed '/' or a relative path.

我需要同时设置baseUrl并rootDir指向我的 src 文件夹，tsconfig.json{ "compilerOptions": { "baseUrl": "./src", "rootDir": "./src", ... } 然后我可以导入 .tsx 文件，而无需前缀“/”或相对路径。

e.g. import BreadCrumb from 'components/BreadCrumb'

例如 import BreadCrumb from 'components/BreadCrumb'

回答by Teddy Sterne

TypeScript imports use /at the start of a path to denote the root directory. To import a file relative to your current file either leave off the initial slash or use ./.

TypeScript 导入/在路径的开头使用来表示根目录。要导入与当前文件相关的文件，请不要使用初始斜杠或使用./.

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

By default the TypeScript compiler assumes the root of the project is the same as the location of your tsconfig.json.

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

You can specify a new root by specifying the rootDirproperty of the compilerOptionsproperty in the tsconfig.

您可以通过在 tsconfig.xml 文件中指定rootDir属性的compilerOptions属性来指定新的根。

For a list of all available property settings consult the tsconfig definition found here.

有关所有可用属性设置的列表，请参阅此处的 tsconfig 定义。

回答by toffee

Just for record

仅供记录

If you want use absolute import from your project, Do not use /as prefix, such as /src/config/cfg, just use as src/config/cfg

如果你想从你的项目中使用绝对导入，不要使用/as 前缀，比如/src/config/cfg，只使用 assrc/config/cfg

As https://stackoverflow.com/a/46229294/7529562pointed, /stand for System root,

正如https://stackoverflow.com/a/46229294/7529562指出的那样，/代表System root，

tscwill complain cannot find module

tsc会抱怨 cannot find module

回答by Aravind

Solution for your import statement in thing.tswill be

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

import {} './product/blah'

and your project structure might be as

你的项目结构可能是

Other Possible options with explanation

其他可能的选项和解释

---

---

I have the following application structure and I place it in

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

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

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

as in the screenshot.

如屏幕截图所示。

I am importing components to the app.module.ts as

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

1. ./will show the current folder (app)

   import { } from './'; 
   

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

   import { } from './'; 
   

1. ../will refer to the root folder (firstAngular2App-master)

   import { } from '../'; 
   

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

   import { } from '../'; 
   

1. ../../will refer to the root folder (Documents folder)

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

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

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

1. ../app/refers to the app folder but it is referred from the root(firstAngular2App)

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

4. ../app/指的是 app 文件夹，但它是从 root(firstAngular2App) 引用的

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