从TypeScript中的根路径导入模块 [英] Import module from root path in TypeScript

问题描述

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

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';

与:

// 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

例如

.因此，是否有一种方法可以在编译器选项中指定此输入路径(例如，C:\product\src)?我需要在tsconfig.json文件中指定此名称，因为我将使用webpack.

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.json file, because I'll use webpack.

我已经尝试了上面的示例，但是TypeScript说找不到所需的模块:

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

// Current script: A.ts

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


// Current script: B.ts

export const B = 0;

我的tsconfig.json文件(在另一个项目中，但两者相似):

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

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

推荐答案

(重新发布我的答案以避免插口).

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

使用 compilerOptions.baseUrl 属性，能够执行以下导入.这使我拥有完整的root-to-expected-path，这有助于我的代码维护，并且可以在任何文件中工作，而与当前文件夹无关.以下示例将我项目的src文件夹作为模块根目录.

Using the compilerOptions.baseUrl property 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.

重要建议:此baseUrl属性不会影响入口Webpack文件(至少对我而言?)，因此，请使用本示例在src文件夹中分离一个主文件，然后从入口运行它(即import { Main } from './src/Main'; new Main; )，只有一次.

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.

// 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中的工作方式:

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:

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

这篇关于从TypeScript中的根路径导入模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！