从 TypeScript 中的根路径导入模块
Import module from root path in 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 文件(在另一个项目中,但两者相似):
{
"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"
]
}
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。
thing.ts 中的导入语句的解决方案将是
import {} './product/blah'
你的项目结构可能是
其他可能的选项及解释
我有以下应用程序结构,我把它放在
C:\Users\(username)\Documents\firstAngular2App
如截图所示。
我正在将组件导入 app.module.ts 作为
./ 会显示当前文件夹(app)
import { } from './';
../ 将引用根文件夹 (firstAngular2App-master)
import { } from '../';
../../将引用根文件夹(Documents文件夹)
import { } from '../../';
../app/ 指的是应用程序文件夹,但它是从根目录引用的(firstAngular2App)
import {} from '../app/';
(Re-posting 我要避免的回答 puppy-socket。)
使用 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') ]
}
}
我需要将 baseUrl
和 rootDir
都设置为指向我在 tsconfig.json
中的 src 文件夹
{
"compilerOptions": {
"baseUrl": "./src",
"rootDir": "./src",
...
}
然后我可以导入 .tsx 文件而无需前缀“/”或相对路径。
例如
import BreadCrumb from 'components/BreadCrumb'
仅供记录
如果要从项目中使用绝对导入,请不要使用 /
作为前缀,例如 /src/config/cfg
,只需使用 src/config/cfg
正如指出的那样,/
代表系统根目录,
tsc
会抱怨cannot find module
假设我有一个项目,它的主要源代码目录是:
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"
]
}
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。
thing.ts 中的导入语句的解决方案将是
import {} './product/blah'
你的项目结构可能是
其他可能的选项及解释
我有以下应用程序结构,我把它放在
C:\Users\(username)\Documents\firstAngular2App
如截图所示。
我正在将组件导入 app.module.ts 作为
./ 会显示当前文件夹(app)
import { } from './';
../ 将引用根文件夹 (firstAngular2App-master)
import { } from '../';
../../将引用根文件夹(Documents文件夹)
import { } from '../../';
../app/ 指的是应用程序文件夹,但它是从根目录引用的(firstAngular2App)
import {} from '../app/';
(Re-posting 我要避免的回答 puppy-socket。)
使用 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') ]
}
}
我需要将 baseUrl
和 rootDir
都设置为指向我在 tsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"rootDir": "./src",
...
}
然后我可以导入 .tsx 文件而无需前缀“/”或相对路径。
例如
import BreadCrumb from 'components/BreadCrumb'
仅供记录
如果要从项目中使用绝对导入,请不要使用 /
作为前缀,例如 /src/config/cfg
,只需使用 src/config/cfg
正如指出的那样,/
代表系统根目录,
tsc
会抱怨cannot find module