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ư và . 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. alias-hq tsconfig-paths 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ề 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. Nhập đường dẫn con của Node.js 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 để 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 trong tệp . Không bắt buộc phải xuất bản gói trên npm. Nhập đường dẫn phụ imports package.json Tạo một tệp 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. package.json Đây là một sự thật thú vị: Node.js đã giới thiệu hỗ trợ cho trường vào năm 2020 thông qua RFC có tên là " ". Mặc dù RFC này chủ yếu được công nhận cho trường , cho phép khai báo điểm nhập cho các gói npm, nhưng và giải quyết các nhiệm vụ hoàn toàn khác nhau, mặc dù chúng có tên và cú pháp tương tự. imports Độ phân giải chỉ định mô-đun trần trong node.js exports exports imports 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 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 , hãy thêm trường sau vào : package.json src imports 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 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ư . imports # @ 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 có thể được sửa đổi như sau: imports { "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 , bạn có thể gặp một số khó khăn. imports Hạn chế của Node.js Nếu bạn định sử dụng bí danh đường dẫn với , thì tôi có một tin xấu cho bạn: Đoạn mã sau sẽ không hoạt động. các mô-đun CommonJS 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: Cần chỉ định đường dẫn đầy đủ đến một tệp, bao gồm cả phần mở rộng tệp. Không được phép chỉ định đường dẫn đến một thư mục và muốn nhập tệp . Thay vào đó, cần chỉ định đường dẫn đầy đủ đến tệp . index.js 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 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. imports 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 . Tính năng này được 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. imports hỗ trợ Để sử dụng trường 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 . imports 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 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 đó. imports // 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 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 . bản phát hành TypeScript 5.0 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 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. imports Mã xây dựng với TypeScript Khi xây dựng mã nguồn bằng trình biên dịch , 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 . tsc imports Do đó, mã phải được biên dịch ở định dạng ESM và trường phải được thêm vào để chạy mã được biên dịch trong Node.js. type package.json { "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ư , 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ư . Để 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 . build/ src/ package.json Điều này cho phép nhập mã đã tạo sẵn từ thư mục thay vì thư mục . build/ 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 trường 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: hỗ trợ imports 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 đã được 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ế độ và . imports thêm dev 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 không hoạt động ngay lập tức. Để kích hoạt nó, bạn cần cài đặt plugin phiên bản 11.1.0 trở lên. Đây là một cấu hình ví dụ: imports @rollup/plugin-node-resolve 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 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. imports 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 có thể không hoạt động như mong đợi. imports 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 đã trường kể từ phiên bản v29.4.0. hỗ trợ imports 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 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 đề. imports 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 trong VS Code v1.77.3 kết hợp với TypeScript v5.0.4. imports Mã VS có các vấn đề sau với bí danh đường dẫn: TypeScript không sử dụng trường cho đến khi cài đặt độ phân giải mô-đun được đặt thành hoặc . 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. imports nodenext bundler IntelliSense hiện không hỗ trợ đề xuất đường dẫn nhập bằng cách sử dụng trường . Có một cho vấn đề này. imports vấn đề mở Để 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 . Nếu bạn không sử dụng TypeScript, bạn có thể thực hiện tương tự trong . tsconfig.json 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 trường . 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ợ: hỗ trợ imports 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 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 . Trong trường hợp này, điều hướng mã ngừng hoạt động hoàn toàn. imports { "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 hoặc . Đ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. tsconfig.json jsconfig.json 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 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. imports 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: Định cấu hình trường trong tệp . Một cấu hình rất cơ bản là đủ trong trường hợp này. imports package.json Để đ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 . Điều quan trọng là phải cấu hình như sau trong cấu hình này: tsc Trường trong tệp . 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. imports package.json Việc bật định dạng gói ESM trong tệp 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 . package.json imports Trong tệp , đặt định dạng mô-đun ESM và . Đ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. tsconfig.json moduleResolution Để 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: Định cấu hình trường trong tệp . 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. imports package.json Để 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 hoặc . tsconfig.json 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 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ế. imports 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 . Để tránh những sự cố này, bạn có thể sử dụng tệp . 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. imports jsconfig.json Một số công cụ phát triển có thể không hoạt động với trường ngay lập tức. Ví dụ: Rollup yêu cầu cài đặt các plugin bổ sung. imports Sử dụng trường 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 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 để đị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. imports Trường 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. imports 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 sẽ không mang lại lợi ích đáng kể. imports 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 RFC để thực hiện xuất nhập khẩu 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 Tài liệu về trường nhập trong Node.js 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