Làm cách nào để sử dụng đường dẫn trong tsconfig.json?

Tôi đã đọc về ánh xạ đường dẫn trong tsconfig.jsonvà tôi muốn sử dụng nó để tránh sử dụng các đường dẫn xấu xí sau:

Tổ chức dự án hơi kỳ lạ bởi vì chúng tôi có một kho lưu trữ đơn có chứa các dự án và thư viện. Các dự án được nhóm theo công ty và theo trình duyệt / máy chủ / phổ quát.

Làm cách nào tôi có thể định cấu hình các đường dẫn tsconfig.jsonthay vì:

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Tôi có thể sử dụng:

import { Something } from "lib/src/[browser/server/universal]/...";

Sẽ có cái gì khác được yêu cầu trong cấu hình webpack? hay là tsconfig.jsonđủ?

Điều này có thể được thiết lập trên tệp tsconfig.json của bạn, vì đây là một tính năng TS.

Bạn có thể làm như thế này:

"compilerOptions": {
        "baseUrl": "src", // This must be specified if "paths" is.
         ...
        "paths": {
            "@app/*": ["app/*"],
            "@config/*": ["app/_config/*"],
            "@environment/*": ["environments/*"],
            "@shared/*": ["app/_shared/*"],
            "@helpers/*": ["helpers/*"]
        },
        ...

Hãy nhớ rằng đường dẫn mà bạn muốn tham chiếu, nó lấy baseUrl của bạn làm cơ sở của tuyến đường bạn đang chỉ đến và nó bắt buộc như được mô tả trên tài liệu.

Ký tự '@' không bắt buộc.

Sau khi bạn thiết lập nó theo cách đó, bạn có thể dễ dàng sử dụng nó như thế này:

import { Yo } from '@config/index';

điều duy nhất bạn có thể nhận thấy là intellisense không hoạt động trong phiên bản mới nhất hiện tại, vì vậy tôi khuyên bạn nên tuân theo quy ước chỉ mục để nhập / xuất tệp.

https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping

Bạn có thể sử dụng kết hợp baseUrlvà paths tài liệu .

Giả sử root nằm trên srcthư mục trên cùng (và tôi đọc đúng hình ảnh của bạn)

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}

Đối với webpackbạn cũng có thể cần thêm độ phân giải mô-đun . Đối với webpack2điều này có thể trông giống như

// webpack.config.js
module.exports = {
    resolve: {
        ...
        modules: [
            ...
            './src/org/global'
        ]
    }
}

Kiểm tra các giải pháp tương tự này với dấu hoa thị

  "baseUrl": ".",
  "paths": {
    "*": [
      "node_modules/*",
      "src/types/*"
    ]
  },

Câu trả lời của Alejandros có hiệu quả với tôi, nhưng khi tôi đang sử dụng awesome-typescript-loadervới webpack 4, tôi cũng phải thêm tsconfig-paths-webpack-plugintệp webpack.config để giải quyết chính xác

Nếu bạn đang sử dụng các đường dẫn, bạn sẽ cần thay đổi lại các đường dẫn tuyệt đối thành các đường dẫn tương đối để nó hoạt động sau khi biên dịch bản thảo thành javascript đơn giản bằng cách sử dụng tsc.

Giải pháp phổ biến nhất cho việc này là tsconfig-path cho đến nay.

Tôi đã thử nó, nhưng nó không hoạt động đối với thiết lập phức tạp của tôi. Ngoài ra, nó giải quyết các đường dẫn trong thời gian chạy, nghĩa là chi phí chung về kích thước gói của bạn và giải quyết hiệu suất.

Vì vậy, tôi đã tự viết một giải pháp, tscpaths .

Tôi muốn nói rằng nó tốt hơn về tổng thể bởi vì nó thay thế các đường dẫn tại thời gian biên dịch. Nó có nghĩa là không có phụ thuộc thời gian chạy hoặc bất kỳ chi phí hiệu năng. Nó khá đơn giản để sử dụng. Bạn chỉ cần thêm một dòng vào tập lệnh xây dựng của bạn trong package.json.

Dự án còn khá trẻ, vì vậy có thể có một số vấn đề nếu thiết lập của bạn rất phức tạp. Nó hoạt động hoàn hảo cho thiết lập của tôi, mặc dù thiết lập của tôi khá phức tạp.

nếu typcript + webpack 2 + at-loader đang được sử dụng, có một bước bổ sung (giải pháp của @ mleko chỉ hoạt động một phần cho tôi):

// tsconfig.json
{
  "compilerOptions": {
    ...
    "rootDir": ".",
    "paths": {
      "lib/*": [
        "src/org/global/lib/*"
      ]
    }
  }
}    

// webpack.config.js
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');

resolve: {
    plugins: [
        new TsConfigPathsPlugin(/* { tsconfig, compiler } */)
    ]
}

Độ phân giải đường dẫn nâng cao trong TypeScript 2.0

Điều này làm việc cho tôi:

 yarn add --dev tsconfig-paths

 ts-node -r tsconfig-paths/register <your-index-file>.ts

Điều này tải tất cả các đường dẫn trong tsconfig.json. Một mẫu tsconfig.json:

{
    "compilerOptions": {
        {…}
        "baseUrl": "./src",
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}

Đảm bảo rằng bạn có cả baseUrl và đường dẫn để làm việc này

Và sau đó bạn có thể nhập như:

import {AlarmIcon} from 'assets/icons'

Đó là loại đường dẫn tương đối Thay vì đoạn mã dưới đây

import { Something } from "../../../../../lib/src/[browser/server/universal]/...";

Chúng ta có thể tránh "../../../../../" trông nó kỳ quặc và không thể đọc được.

Vì vậy, tập tin cấu hình typecript có câu trả lời giống nhau. Chỉ cần chỉ định cơ sở, cấu hình sẽ chăm sóc đường dẫn tương đối của bạn.

cách để cấu hình: tập tin tsconfig.json thêm các thuộc tính dưới đây.

"baseUrl": "src",
    "paths": {
      "@app/*": [ "app/*" ],
      "@env/*": [ "environments/*" ]
    }

Vì vậy, cuối cùng nó sẽ trông như dưới đây

import { Something } from "@app/src/[browser/server/universal]/...";

Nó trông đơn giản, tuyệt vời và dễ đọc hơn ..

Kiểm tra hoạt động của trình biên dịch bằng cách sử dụng này

Tôi đã thêm baseUrl trong tệp cho một dự án như dưới đây:

"baseUrl": "src"

Nó đang hoạt động tốt. Vì vậy, thêm thư mục cơ sở của bạn cho dự án của bạn.

/chỉ bắt đầu từ gốc, để có được đường dẫn tương đối chúng ta nên sử dụng ./hoặc../

Có vẻ như đã có một bản cập nhật cho React không cho phép bạn thiết lập "paths"trong bất kỳ thời gian dài nào tsconfig.json.

Nicely React chỉ đưa ra một cảnh báo:

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

sau đó cập nhật tsconfig.jsonvà xóa toàn bộ "paths"phần cho bạn. Có một cách để vượt qua vòng chạy này

npm run eject

Điều này sẽ đẩy tất cả các create-react-scriptscài đặt bằng cách thêm configvà scriptsthư mục và xây dựng / cấu hình tệp vào dự án của bạn. Điều này cũng cho phép kiểm soát nhiều hơn đối với cách mọi thứ được xây dựng, được đặt tên, v.v. bằng cách cập nhật các {project}/config/*tệp.

Sau đó cập nhật tsconfig.json

{
    "compilerOptions": {
        "baseUrl": "./src",
        {…}
        "paths": {
            "assets/*": [ "assets/*" ],
            "styles/*": [ "styles/*" ]
        }
    },
}