Tổ chức các tùy chọn liên quan đến mô-đun trong TypeScript

May 08 2022
Trong TypeScript 4.7, một tùy chọn trình biên dịch bắt đầu với tên “mô-đun” đã được thêm vào, và vì nó thực sự giống như một cái gì đó, các vai trò được tổ chức nhẹ nhàng. Bài viết này chỉ là một phần giới thiệu cẩu thả, vì vậy hãy đọc Tài liệu tham khảo TSConfig để biết thêm chi tiết về từng phần. Thư tín Có vẻ như thế này khi mã nguồn và những gì mỗi tùy chọn hoạt động được minh họa gần đúng. Điều quan trọng Cho dù bạn có nhầm lẫn với tùy chọn nào đi chăng nữa, thì import specifier (“.

Trong TypeScript 4.7, một tùy chọn trình biên dịch bắt đầu với tên “mô-đun” đã được thêm vào, và vì nó thực sự giống như một cái gì đó, các vai trò được tổ chức nhẹ nhàng.

Vui lòng đọc Tài liệu tham khảo cấu hình TS để biết thêm chi tiết về mỗi loại, vì bài viết này chỉ là phần giới thiệu sơ bộ .

Mối quan hệ thư từ

Đây là một minh họa sơ bộ về mã nguồn và những gì mỗi tùy chọn hoạt động.

Thứ quan trọng

Cho dù bạn có nhầm lẫn với tùy chọn nào đi chăng nữa, thì nhập chỉ định (phần “./hoge” trong hình trên) sẽ không được viết lại tại thời điểm biên dịch.

import "./foo.cjs"Với ý nghĩ này, bạn nên tin rằng việc viết trong các tệp TypeScript như .mts, .cts và --moduleSuffixesđiều đó chỉ ảnh hưởng đến việc khám phá mã nguồn.

--module

Đặt cách biên dịch câu lệnh import/ trong nguồn TypeScript .export

Ví dụ --module commonjs, nó được chuyển đổi thành require/ .module.exports=

--moduleResolution

"Cách tìm kiếm mã nguồn / tệp định nghĩa loại sẽ được nhập" được quyết định.

--moduleXác định giá trị mặc định.

Ví dụ --module commonjs, nếu --moduleResolution node, --module node16và nếu --moduleResolution node16.

import { Button } from "./Button"Tìm kiếm đường dẫn tương đối với phần mở rộng bị bỏ qua được thực hiện --moduleResolution nodevì cài đặt được phản ánh.

--moduleResolution node16Sau đó, không được phép bỏ qua phần mở rộng như vậy. import from "./foo.mjs"Nếu vậy, hãy tìm ./foo.mts hoặc ./foo.d.mts và tra cứu thông tin định nghĩa loại.

--moduleSuffixes

Các tùy chọn được thêm vào TypeScript 4.7.

--moduleResolutionĐây cũng là hệ thống tương tự theo nghĩa là tùy chỉnh phương pháp tìm kiếm của tệp định nghĩa mã nguồn / loại .

Mã nguồn đích mà hậu tố được chỉ định trong được thêm vào thông số Nhập trong --moduleSuffixesmã nguồn cũng sẽ được đưa vào mục tiêu tìm kiếm.

{
  "compilerOptions": {
    "module": "esnext",
    "moduleResolution": "node",
    "moduleSuffixes": [".ios", ".native", ""]
  }
}

Lưu ý rằng nhiệm vụ của trình gói mô-đun và trình tải mô-đun là quyết định mô-đun nào sẽ liên kết trong thời gian chạy, không phải TypeScript. Ví dụ: .ios và .native trong ví dụ trên có chức năng Phân giải mô-đun tương tự ở phía Metro Bundler.

--moduleDetection

Đây cũng là một tùy chọn được thêm vào trong TypeScript 4.7, nhưng bạn không phải lo lắng về tùy chọn này trừ khi bạn có một ý tưởng rất hay.

Đây là một tùy chọn liên quan đến "liệu mã nguồn của một TypeScript nhất định là một mô-đun hay một tập lệnh", nhưng "tập lệnh" ở đây là khi type="module"JavaScript được tải vào trình duyệt bằng phần tử tập lệnh không phải như sau. Bạn có thể muốn để tưởng tượng rằng.

<script src="hoge.js" />
<script src="foo.js" />

Ban đầu, TypeScript quyết định tập lệnh hoặc mô-đun với logic "Nếu không có nhập hoặc xuất, thì đó là một tập lệnh", nhưng logic này đã được giới thiệu vì nó không thuận tiện khi xem xét Native ESM của nền Node.js.

© Copyright 2021 - 2022 | vngogo.com | All Rights Reserved