从TypeScript中的根路径导入模块

Question

我们假设我有一个项目,它的主要源目录是:

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

Answer 1

我需要同时设置baseUrl并rootDir指向我的 src 文件夹tsconfig.json

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

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

例如 import BreadCrumb from 'components/BreadCrumb'

Answer 2

(重新发布我的答案以避免小狗插座.)

使用该compilerOptions.baseUrl属性我能够进行以下导入.这使我有了一个完整的root-to-expected-path,这有助于我的代码维护,并且可以在任何文件中工作,独立于当前文件夹.以下示例将我的项目的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') ]
    }
}

Answer 3

TypeScript导入/在路径的开头使用以表示根目录.要导入相对于当前文件的文件,请不要使用初始斜杠或使用./.

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

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

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

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