Cách định cấu hình bí danh đường dẫn trong các dự án giao diện người dùng theo cách bản địa

Giới thiệu về bí danh đường dẫn

Các dự án thường phát triển thành các cấu trúc thư mục lồng nhau, phức tạp. Do đó, các đường dẫn nhập có thể trở nên dài hơn và khó hiểu hơn, điều này có thể ảnh hưởng tiêu cực đến hình thức của mã và khiến việc hiểu mã được nhập bắt nguồn từ đâu trở nên khó khăn hơn.

Sử dụng bí danh đường dẫn có thể giải quyết vấn đề bằng cách cho phép định nghĩa các mục nhập có liên quan đến các thư mục được xác định trước. Cách tiếp cận này không chỉ giải quyết các vấn đề về hiểu đường dẫn nhập mà còn đơn giản hóa quá trình di chuyển mã trong quá trình tái cấu trúc.

 // Without Aliases import { apiClient } from '../../../../shared/api'; import { ProductView } from '../../../../entities/product/components/ProductView'; import { addProductToCart } from '../../../add-to-cart/actions'; // With Aliases import { apiClient } from '#shared/api'; import { ProductView } from '#entities/product/components/ProductView'; import { addProductToCart } from '#features/add-to-cart/actions';

Có nhiều thư viện có sẵn để định cấu hình bí danh đường dẫn trong Node.js, chẳng hạn như alias-hq và tsconfig-paths . Tuy nhiên, khi xem qua tài liệu về Node.js, tôi đã phát hiện ra một cách để định cấu hình bí danh đường dẫn mà không cần phải dựa vào thư viện của bên thứ ba.

Hơn nữa, cách tiếp cận này cho phép sử dụng bí danh mà không yêu cầu bước xây dựng.

Trong bài viết này, chúng ta sẽ thảo luận về Nhập đường dẫn con của Node.js và cách định cấu hình bí danh đường dẫn bằng cách sử dụng nó. Chúng tôi cũng sẽ khám phá sự hỗ trợ của họ trong hệ sinh thái giao diện người dùng.

Trường Nhập khẩu

Bắt đầu từ Node.js v12.19.0, nhà phát triển có thể sử dụng Nhập đường dẫn phụ để khai báo bí danh đường dẫn trong gói npm. Điều này có thể được thực hiện thông qua trường imports trong tệp package.json . Không bắt buộc phải xuất bản gói trên npm.

Tạo một tệp package.json trong bất kỳ thư mục nào là đủ. Do đó, phương pháp này cũng phù hợp cho các dự án tư nhân.

Về mặt lý thuyết, hỗ trợ riêng cho bí danh đường dẫn có những ưu điểm sau:

• Không cần cài đặt bất kỳ thư viện bên thứ ba nào.

• Không cần phải xây dựng trước hoặc xử lý quá trình nhập một cách nhanh chóng để chạy mã.

• Bí danh được hỗ trợ bởi bất kỳ công cụ dựa trên Node.js nào sử dụng cơ chế phân giải nhập tiêu chuẩn.

• Điều hướng mã và tự động hoàn thành sẽ hoạt động trong trình chỉnh sửa mã mà không yêu cầu bất kỳ thiết lập bổ sung nào.

Tôi đã cố gắng định cấu hình bí danh đường dẫn trong các dự án của mình và thử nghiệm các câu lệnh đó trong thực tế.

Định cấu hình bí danh đường dẫn

Ví dụ, hãy xem xét một dự án có cấu trúc thư mục sau:

 my-awesome-project ├── src/ │ ├── entities/ │ │ └── product/ │ │ └── components/ │ │ └── ProductView.js │ ├── features/ │ │ └── add-to-cart/ │ │ └── actions/ │ │ └── index.js │ └── shared/ │ └── api/ │ └── index.js └── package.json

Để định cấu hình bí danh đường dẫn, bạn có thể thêm một vài dòng vào package.json như được mô tả trong tài liệu. Chẳng hạn, nếu bạn muốn cho phép nhập liên quan đến thư mục src , hãy thêm trường imports sau vào package.json :

 { "name": "my-awesome-project", "imports": { "#*": "./src/*" } }

Để sử dụng bí danh đã định cấu hình, quá trình nhập có thể được viết như sau:

 import { apiClient } from '#shared/api'; import { ProductView } from '#entities/product/components/ProductView'; import { addProductToCart } from '#features/add-to-cart/actions';

Bắt đầu từ giai đoạn thiết lập, chúng tôi phải đối mặt với hạn chế đầu tiên: các mục trong trường imports phải bắt đầu bằng ký hiệu # . Điều này đảm bảo rằng chúng được phân biệt với các chỉ định gói như @ .

Tôi tin rằng giới hạn này hữu ích vì nó cho phép nhà phát triển nhanh chóng xác định thời điểm sử dụng bí danh đường dẫn trong quá trình nhập và nơi có thể tìm thấy cấu hình bí danh.

Để thêm nhiều bí danh đường dẫn hơn cho các mô-đun thường được sử dụng, trường imports có thể được sửa đổi như sau:

 { "name": "my-awesome-project", "imports": { "#modules/*": "./path/to/modules/*", "#logger": "./src/shared/lib/logger.js", "#*": "./src/*" } }

Sẽ là lý tưởng nếu bạn kết thúc bài viết bằng cụm từ "mọi thứ khác sẽ hoạt động ổn định." Tuy nhiên, trên thực tế, nếu định sử dụng trường imports , bạn có thể gặp một số khó khăn.

Hạn chế của Node.js

Nếu bạn định sử dụng bí danh đường dẫn với các mô-đun CommonJS , thì tôi có một tin xấu cho bạn: Đoạn mã sau sẽ không hoạt động.

 const { apiClient } = require('#shared/api'); const { ProductView } = require('#entities/product/components/ProductView'); const { addProductToCart } = require('#features/add-to-cart/actions');

Khi sử dụng bí danh đường dẫn trong Node.js, bạn phải tuân theo các quy tắc phân giải mô-đun từ thế giới ESM. Điều này áp dụng cho cả mô-đun ES và mô-đun CommonJS và dẫn đến hai yêu cầu mới phải được đáp ứng:

1. Cần chỉ định đường dẫn đầy đủ đến một tệp, bao gồm cả phần mở rộng tệp.

   
   

2. Không được phép chỉ định đường dẫn đến một thư mục và muốn nhập tệp index.js . Thay vào đó, cần chỉ định đường dẫn đầy đủ đến tệp index.js .

Để cho phép Node.js giải quyết chính xác các mô-đun, quá trình nhập phải được sửa như sau:

 const { apiClient } = require('#shared/api/index.js'); const { ProductView } = require('#entities/product/components/ProductView.js'); const { addProductToCart } = require('#features/add-to-cart/actions/index.js');

Những hạn chế này có thể dẫn đến sự cố khi định cấu hình trường imports trong dự án có nhiều mô-đun CommonJS. Tuy nhiên, nếu bạn đang sử dụng các mô-đun ES thì mã của bạn đáp ứng tất cả các yêu cầu.

Hơn nữa, nếu bạn đang xây dựng mã bằng trình đóng gói, bạn có thể bỏ qua những hạn chế này. Chúng tôi sẽ thảo luận làm thế nào để làm điều này dưới đây.

Hỗ trợ Nhập đường dẫn phụ trong TypeScript

Để giải quyết chính xác các mô-đun đã nhập để kiểm tra loại, TypeScript cần hỗ trợ trường imports . Tính năng này được hỗ trợ bắt đầu từ phiên bản 4.8.1, nhưng chỉ khi các giới hạn của Node.js được liệt kê ở trên được đáp ứng.

Để sử dụng trường imports cho độ phân giải mô-đun, một số tùy chọn phải được định cấu hình trong tệp tsconfig.json .

 { "compilerOptions": { /* Specify what module code is generated. */ "module": "esnext", /* Specify how TypeScript looks up a file from a given module specifier. */ "moduleResolution": "nodenext" } }

Cấu hình này cho phép trường imports hoạt động giống như trong Node.js. Điều này có nghĩa là nếu bạn quên bao gồm phần mở rộng tệp trong quá trình nhập mô-đun, TypeScript sẽ tạo ra một lỗi cảnh báo bạn về điều đó.

 // OK import { apiClient } from '#shared/api/index.js'; // Error: Cannot find module '#src/shared/api/index' or its corresponding type declarations. import { apiClient } from '#shared/api/index'; // Error: Cannot find module '#src/shared/api' or its corresponding type declarations. import { apiClient } from '#shared/api'; // Error: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './relative.js'? import { foo } from './relative';

Tôi không muốn viết lại tất cả các lần nhập, vì hầu hết các dự án của tôi đều sử dụng trình đóng gói để tạo mã và tôi không bao giờ thêm phần mở rộng tệp khi nhập mô-đun. Để khắc phục hạn chế này, tôi đã tìm ra cách định cấu hình dự án như sau:

 { "name": "my-awesome-project", "imports": { "#*": [ "./src/*", "./src/*.ts", "./src/*.tsx", "./src/*.js", "./src/*.jsx", "./src/*/index.ts", "./src/*/index.tsx", "./src/*/index.js", "./src/*/index.jsx" ] } }

Cấu hình này cho phép nhập mô-đun theo cách thông thường mà không cần chỉ định phần mở rộng. Điều này thậm chí hoạt động khi một đường dẫn nhập trỏ đến một thư mục.

 // OK import { apiClient } from '#shared/api/index.js'; // OK import { apiClient } from '#shared/api/index'; // OK import { apiClient } from '#shared/api'; // Error: Relative import paths need explicit file extensions in EcmaScript imports when '--moduleResolution' is 'node16' or 'nodenext'. Did you mean './relative.js'? import { foo } from './relative';

Chúng tôi còn một vấn đề liên quan đến việc nhập bằng đường dẫn tương đối. Vấn đề này không liên quan đến bí danh đường dẫn. TypeScript đưa ra lỗi vì chúng tôi đã định cấu hình độ phân giải mô-đun để sử dụng chế độ nodenext .

May mắn thay, một chế độ phân giải mô-đun mới đã được thêm vào trong bản phát hành TypeScript 5.0 gần đây, loại bỏ nhu cầu chỉ định đường dẫn đầy đủ bên trong các lần nhập. Để bật chế độ này, một số tùy chọn phải được định cấu hình trong tệp tsconfig.json .

 { "compilerOptions": { /* Specify what module code is generated. */ "module": "esnext", /* Specify how TypeScript looks up a file from a given module specifier. */ "moduleResolution": "bundler" } }

Sau khi hoàn tất thiết lập, quá trình nhập cho các đường dẫn tương đối sẽ hoạt động như bình thường.

 // OK import { apiClient } from '#shared/api/index.js'; // OK import { apiClient } from '#shared/api/index'; // OK import { apiClient } from '#shared/api'; // OK import { foo } from './relative';

Bây giờ, chúng ta hoàn toàn có thể sử dụng bí danh đường dẫn thông qua trường imports mà không có bất kỳ giới hạn bổ sung nào về cách viết đường dẫn nhập khẩu.

Mã xây dựng với TypeScript

Khi xây dựng mã nguồn bằng trình biên dịch tsc , cấu hình bổ sung có thể cần thiết. Một hạn chế của TypeScript là không thể tạo mã theo định dạng mô-đun CommonJS khi sử dụng trường imports .

Do đó, mã phải được biên dịch ở định dạng ESM và trường type phải được thêm vào package.json để chạy mã được biên dịch trong Node.js.

 { "name": "my-awesome-project", "type": "module", "imports": { "#*": "./src/*" } }

Nếu mã của bạn được biên dịch vào một thư mục riêng, chẳng hạn như build/ , thì Node.js có thể không tìm thấy mô-đun vì bí danh đường dẫn sẽ trỏ đến vị trí ban đầu, chẳng hạn như src/ . Để giải quyết vấn đề này, có thể sử dụng các đường dẫn nhập có điều kiện trong tệp package.json .

Điều này cho phép nhập mã đã tạo sẵn từ thư mục build/ thay vì thư mục src/ .

 { "name": "my-awesome-project", "type": "module", "imports": { "#*": { "default": "./src/*", "production": "./build/*" } } }

Để sử dụng một điều kiện nhập cụ thể, Node.js phải được khởi chạy với cờ --conditions .

 node --conditions=production build/index.js

Hỗ trợ nhập đường dẫn phụ trong Code Bundlers

Các trình đóng gói mã thường sử dụng cách triển khai độ phân giải mô-đun của riêng chúng, thay vì cách triển khai được tích hợp trong Node.js. Do đó, điều quan trọng đối với họ là triển khai hỗ trợ cho trường imports .

Tôi đã thử nghiệm các bí danh đường dẫn với Webpack, Rollup và Vite trong các dự án của mình và sẵn sàng chia sẻ những phát hiện của mình.

Đây là cấu hình bí danh đường dẫn mà tôi đã sử dụng để kiểm tra các gói. Tôi đã sử dụng thủ thuật tương tự như đối với TypeScript để tránh phải chỉ định đường dẫn đầy đủ tới các tệp bên trong quá trình nhập.

 { "name": "my-awesome-project", "type": "module", "imports": { "#*": [ "./src/*", "./src/*.ts", "./src/*.tsx", "./src/*.js", "./src/*.jsx", "./src/*/index.ts", "./src/*/index.tsx", "./src/*/index.js", "./src/*/index.jsx" ] } }

gói web

Webpack hỗ trợ trường imports bắt đầu từ v5.0. Bí danh đường dẫn hoạt động mà không cần bất kỳ cấu hình bổ sung nào. Đây là cấu hình Webpack mà tôi đã sử dụng để xây dựng một dự án thử nghiệm với TypeScript:

 const config = { mode: 'development', devtool: false, entry: './src/index.ts', module: { rules: [ { test: /\.tsx?$/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset-typescript'], }, }, }, ], }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, }; export default config;

vit

Hỗ trợ cho trường imports đã được thêm vào phiên bản Vite 4.2.0. Tuy nhiên, một lỗi quan trọng đã được sửa trong phiên bản 4.3.3, vì vậy bạn nên sử dụng ít nhất phiên bản này. Trong Vite, bí danh đường dẫn hoạt động mà không cần cấu hình bổ sung ở cả chế độ dev và build .

Do đó, tôi đã xây dựng một dự án thử nghiệm với cấu hình hoàn toàn trống rỗng.

Tổng số

Mặc dù Tổng số được sử dụng bên trong Vite, nhưng trường imports không hoạt động ngay lập tức. Để kích hoạt nó, bạn cần cài đặt plugin @rollup/plugin-node-resolve phiên bản 11.1.0 trở lên. Đây là một cấu hình ví dụ:

 import { nodeResolve } from '@rollup/plugin-node-resolve'; import { babel } from '@rollup/plugin-babel'; export default [ { input: 'src/index.ts', output: { name: 'mylib', file: 'build.js', format: 'es', }, plugins: [ nodeResolve({ extensions: ['.ts', '.tsx', '.js', '.jsx'], }), babel({ presets: ['@babel/preset-typescript'], extensions: ['.ts', '.tsx', '.js', '.jsx'], }), ], }, ];

Thật không may, với cấu hình này, bí danh đường dẫn chỉ hoạt động trong giới hạn của Node.js. Điều này có nghĩa là bạn phải chỉ định đường dẫn tệp đầy đủ, bao gồm cả phần mở rộng. Việc chỉ định một mảng bên trong trường imports sẽ không bỏ qua giới hạn này vì Tổng số chỉ sử dụng đường dẫn đầu tiên trong mảng.

Tôi tin rằng có thể giải quyết vấn đề này bằng cách sử dụng plugin Rollup, nhưng tôi chưa thử làm như vậy vì tôi chủ yếu sử dụng Rollup cho các thư viện nhỏ. Trong trường hợp của tôi, việc viết lại các đường dẫn nhập trong suốt dự án sẽ dễ dàng hơn.

Hỗ trợ nhập đường dẫn phụ trong trình chạy thử nghiệm

Trình chạy thử nghiệm là một nhóm công cụ phát triển khác phụ thuộc nhiều vào cơ chế phân giải mô-đun. Họ thường sử dụng cách triển khai giải pháp mô-đun của riêng họ, tương tự như các gói mã. Do đó, có khả năng trường imports có thể không hoạt động như mong đợi.

May mắn thay, các công cụ tôi đã thử nghiệm hoạt động tốt. Tôi đã thử nghiệm bí danh đường dẫn với Jest v29.5.0 và Vite v0.30.1. Trong cả hai trường hợp, bí danh đường dẫn hoạt động trơn tru mà không có bất kỳ thiết lập hoặc giới hạn bổ sung nào. Jest đã hỗ trợ trường imports kể từ phiên bản v29.4.0.

Mức độ hỗ trợ trong Vitest chỉ dựa vào phiên bản của Vite, phiên bản này phải từ v4.2.0 trở lên.

Hỗ trợ Nhập đường dẫn phụ trong Trình chỉnh sửa mã

Trường imports trong các thư viện phổ biến hiện được hỗ trợ tốt. Tuy nhiên, còn các trình soạn thảo mã thì sao? Tôi đã kiểm tra điều hướng mã, cụ thể là chức năng "Chuyển đến Định nghĩa", trong một dự án sử dụng bí danh đường dẫn. Hóa ra việc hỗ trợ tính năng này trong trình chỉnh sửa mã có một số vấn đề.

Mã VS

Khi nói đến Mã VS, phiên bản TypeScript là rất quan trọng. Máy chủ ngôn ngữ TypeScript chịu trách nhiệm phân tích và điều hướng thông qua mã JavaScript và TypeScript.

Tùy thuộc vào cài đặt của bạn, Mã VS sẽ sử dụng phiên bản TypeScript tích hợp sẵn hoặc phiên bản được cài đặt trong dự án của bạn.

Tôi đã thử nghiệm hỗ trợ trường imports trong VS Code v1.77.3 kết hợp với TypeScript v5.0.4.

Mã VS có các vấn đề sau với bí danh đường dẫn:

1. TypeScript không sử dụng trường imports cho đến khi cài đặt độ phân giải mô-đun được đặt thành nodenext hoặc bundler . Do đó, để sử dụng nó trong Mã VS, bạn cần chỉ định độ phân giải mô-đun trong dự án của mình.

   
   

2. IntelliSense hiện không hỗ trợ đề xuất đường dẫn nhập bằng cách sử dụng trường imports . Có một vấn đề mở cho vấn đề này.

Để bỏ qua cả hai vấn đề, bạn có thể sao chép cấu hình bí danh đường dẫn trong tệp tsconfig.json . Nếu bạn không sử dụng TypeScript, bạn có thể thực hiện tương tự trong jsconfig.json .

 // tsconfig.json OR jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "#*": ["./src/*"] } } } // package.json { "name": "my-awesome-project", "imports": { "#*": "./src/*" } }

WebStorm

Kể từ phiên bản 2021.3 (tôi đã thử nghiệm vào năm 2022.3.4), WebStorm hỗ trợ trường imports . Tính năng này hoạt động độc lập với phiên bản TypeScript vì WebStorm sử dụng bộ phân tích mã của riêng nó. Tuy nhiên, WebStorm có một nhóm vấn đề riêng liên quan đến bí danh đường dẫn hỗ trợ:

1. Trình chỉnh sửa tuân thủ nghiêm ngặt các hạn chế do Node.js áp đặt đối với việc sử dụng bí danh đường dẫn. Điều hướng mã sẽ không hoạt động nếu phần mở rộng tệp không được chỉ định rõ ràng. Điều tương tự cũng áp dụng cho việc nhập thư mục bằng tệp index.js .

   
   

2. WebStorm có một lỗi ngăn việc sử dụng một loạt các đường dẫn trong trường imports . Trong trường hợp này, điều hướng mã ngừng hoạt động hoàn toàn.

 { "name": "my-awesome-project", // OK "imports": { "#*": "./src/*" }, // This breaks code navigation "imports": { "#*": ["./src/*", "./src/*.ts", "./src/*.tsx"] } }

May mắn thay, chúng ta có thể sử dụng thủ thuật tương tự để giải quyết tất cả các vấn đề trong Mã VS. Cụ thể, chúng ta có thể sao chép cấu hình bí danh đường dẫn trong tệp tsconfig.json hoặc jsconfig.json . Điều này cho phép sử dụng bí danh đường dẫn mà không có bất kỳ giới hạn nào.

Cấu hình đề xuất

Dựa trên các thử nghiệm và kinh nghiệm của tôi khi sử dụng trường imports trong các dự án khác nhau, tôi đã xác định các cấu hình bí danh đường dẫn tốt nhất cho các loại dự án khác nhau.

Không có TypeScript hoặc Bundler

Cấu hình này dành cho các dự án có mã nguồn chạy trong Node.js mà không yêu cầu các bước xây dựng bổ sung. Để sử dụng nó, hãy làm theo các bước sau:

1. Định cấu hình trường imports trong tệp package.json . Một cấu hình rất cơ bản là đủ trong trường hợp này.

   
   

2. Để điều hướng mã hoạt động trong trình chỉnh sửa mã, cần định cấu hình bí danh đường dẫn trong tệp jsconfig.json .

 // jsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "#*": ["./src/*"] } } } // package.json { "name": "my-awesome-project", "imports": { "#*": "./src/*" } }

Mã xây dựng bằng TypeScript

Cấu hình này nên được sử dụng cho các dự án mà mã nguồn được viết bằng TypeScript và được xây dựng bằng trình biên dịch tsc . Điều quan trọng là phải cấu hình như sau trong cấu hình này:

1. Trường imports trong tệp package.json . Trong trường hợp này, cần phải thêm bí danh đường dẫn có điều kiện để đảm bảo rằng Node.js giải quyết chính xác mã được biên dịch.

   
   

2. Việc bật định dạng gói ESM trong tệp package.json là cần thiết vì TypeScript chỉ có thể biên dịch mã ở định dạng ESM khi sử dụng trường imports .

   
   

3. Trong tệp tsconfig.json , đặt định dạng mô-đun ESM và moduleResolution . Điều này sẽ cho phép TypeScript đề xuất các phần mở rộng tệp bị quên trong quá trình nhập. Nếu phần mở rộng tệp không được chỉ định, mã sẽ không chạy trong Node.js sau khi biên dịch.

   
   

4. Để khắc phục điều hướng mã trong trình chỉnh sửa mã, bí danh đường dẫn phải được lặp lại trong tệp tsconfig.json .

 // tsconfig.json { "compilerOptions": { "module": "esnext", "moduleResolution": "nodenext", "baseUrl": "./", "paths": { "#*": ["./src/*"] }, "outDir": "./build" } } // package.json { "name": "my-awesome-project", "type": "module", "imports": { "#*": { "default": "./src/*", "production": "./build/*" } } }

Mã xây dựng bằng cách sử dụng Bundler

Cấu hình này dành cho các dự án có mã nguồn được đóng gói. TypeScript không bắt buộc trong trường hợp này. Nếu không có, tất cả cài đặt có thể được đặt trong tệp jsconfig.json .

Tính năng chính của cấu hình này là nó cho phép bạn bỏ qua các giới hạn của Node.js liên quan đến việc chỉ định phần mở rộng tệp trong quá trình nhập.

Điều quan trọng là phải cấu hình như sau:

1. Định cấu hình trường imports trong tệp package.json . Trong trường hợp này, bạn cần thêm một mảng đường dẫn cho từng bí danh. Điều này sẽ cho phép trình đóng gói tìm thấy mô-đun đã nhập mà không yêu cầu chỉ định phần mở rộng tệp.

   
   

2. Để sửa điều hướng mã trong trình chỉnh sửa mã, bạn cần lặp lại bí danh đường dẫn trong tệp tsconfig.json hoặc jsconfig.json .

 // tsconfig.json { "compilerOptions": { "baseUrl": "./", "paths": { "#*": ["./src/*"] } } } // package.json { "name": "my-awesome-project", "imports": { "#*": [ "./src/*", "./src/*.ts", "./src/*.tsx", "./src/*.js", "./src/*.jsx", "./src/*/index.ts", "./src/*/index.tsx", "./src/*/index.js", "./src/*/index.jsx" ] } }

Phần kết luận

Định cấu hình bí danh đường dẫn thông qua trường imports có cả ưu và nhược điểm so với định cấu hình thông qua thư viện của bên thứ ba. Mặc dù phương pháp này được hỗ trợ bởi các công cụ phát triển phổ biến (kể từ tháng 4 năm 2023), nhưng nó cũng có những hạn chế.

Phương pháp này mang lại những lợi ích sau:

• Khả năng sử dụng bí danh đường dẫn mà không cần phải biên dịch hoặc dịch mã "một cách nhanh chóng".

• Hầu hết các công cụ phát triển phổ biến đều hỗ trợ bí danh đường dẫn mà không cần bất kỳ cấu hình bổ sung nào. Điều này đã được xác nhận trong Webpack, Vite, Jest và Vitest.

• Cách tiếp cận này thúc đẩy việc định cấu hình bí danh đường dẫn ở một vị trí có thể dự đoán được (tệp package.json ).

• Định cấu hình bí danh đường dẫn không yêu cầu cài đặt thư viện của bên thứ ba.

Tuy nhiên, có những nhược điểm tạm thời sẽ bị loại bỏ khi các công cụ phát triển phát triển:

• Ngay cả những trình soạn thảo mã phổ biến cũng gặp sự cố với việc hỗ trợ trường imports . Để tránh những sự cố này, bạn có thể sử dụng tệp jsconfig.json . Tuy nhiên, điều này dẫn đến sự trùng lặp cấu hình bí danh đường dẫn trong hai tệp.

• Một số công cụ phát triển có thể không hoạt động với trường imports ngay lập tức. Ví dụ: Rollup yêu cầu cài đặt các plugin bổ sung.

• Sử dụng trường imports trong Node.js sẽ thêm các ràng buộc mới trên đường dẫn nhập. Các ràng buộc này giống như các ràng buộc đối với các mô-đun ES, nhưng chúng có thể gây khó khăn hơn khi bắt đầu sử dụng trường imports .

• Các ràng buộc của Node.js có thể dẫn đến sự khác biệt trong quá trình triển khai giữa Node.js và các công cụ phát triển khác. Chẳng hạn, các trình đóng gói mã có thể bỏ qua các ràng buộc của Node.js. Những khác biệt này đôi khi có thể làm phức tạp cấu hình, đặc biệt là khi thiết lập TypeScript.

Vì vậy, có đáng để sử dụng trường imports để định cấu hình bí danh đường dẫn không? Tôi tin rằng đối với các dự án mới, vâng, phương pháp này đáng để sử dụng thay vì các thư viện của bên thứ ba.

Trường imports có cơ hội tốt để trở thành một cách tiêu chuẩn để định cấu hình bí danh đường dẫn cho nhiều nhà phát triển trong những năm tới, vì nó mang lại những lợi thế đáng kể so với các phương pháp cấu hình truyền thống.

Tuy nhiên, nếu bạn đã có một dự án với bí danh đường dẫn được định cấu hình, việc chuyển sang trường imports sẽ không mang lại lợi ích đáng kể.

Tôi hy vọng bạn đã học được một cái gì đó mới từ bài viết này. Cảm ơn bạn đã đọc!

Liên kết hữu ích

1. RFC để thực hiện xuất nhập khẩu
2. Một tập hợp các thử nghiệm để hiểu rõ hơn về khả năng của trường nhập khẩu
3. Tài liệu về trường nhập trong Node.js
4. Hạn chế của Node.js đối với đường dẫn nhập trong mô-đun ES

Cũng được xuất bản ở đây