Đường dẫn tương đối - tuyệt đối khi import trong Reactjs

Mình đã đọc câu hỏi và câu trả lời, đúng là không xác đáng thật. Với hiểu biết của mình thì lý do chỉ có import tương đối mà không có tuyệt đối như sau:

• import là tính năng được thêm vào JavaScript từ ES2015 (ES6), không phải tính năng riêng của React hay bất cứ thư viện nào. Dùng React kết hợp import rất tiện, bạn có thể dùng import cho bất cứ code JavaScript nào khác.
• Tuy được thêm vào đặc tả nhưng hoạt động của nó lại phụ thuộc vào cài đặt của từng trình duyệt cụ thể. Và theo mình được biết, hiện tại chưa có trình duyệt nào hỗ trợ cú pháp này. Không rõ nguyên nhân là gì nhưng mình đoán họ chưa tối ưu được quá trình tải script do nó hoạt động khác hẳn cách truyền thống.
• Vì lý do trên nên chúng ta phải dùng các module loader (browserify, webpack, v.v...) để build code JavaScript, hiểu đơn giản là chuyển cú pháp import đó thành cú pháp mà các trình duyệt có thể hiểu và thực thi được. Mỗi một module loader có một cách làm khác nhau, nhưng tựu chung đều có đặc điểm là gộp tất cả vào 1 file.
• Các module loader này (trong bài viết kia là webpack) chạy dựa trên NodeJS. Có thể hiểu chúng chạy như một command trong hệ điều hành nên chúng sử dụng file system của chính hệ điều hành đó (trang web và trình duyệt chỉ làm việc với file đã được build) do đó đường dẫn các file này sẽ là sử dụng đường dẫn trong file system.
• Vì lý do đó, nên thông thường người ta sẽ sử dụng đường dẫn tương đối trong lập trình, bởi vì chỉ có như vậy mới đảm bảo việc build code diễn ra tốt đẹp trên các máy khác nhau. Ví dụ code tôi đặt ở thư mục /user/home/ahjhj/work nhưng người khác lại để ở chỗ khác, nếu dùng đường dẫn tuyệt đối thì chỉ mình tôi build được mà thôi, người khác build sẽ lỗi ngay. Dùng đường dẫn tuyệt đối thì yêu cầu mọi người trong team phải đặt code trong thư mục giống hệt nhau, điều đó là rất khó trong thực tế, do đó thường không ai làm như vậy.
• Ngoài ra, vì đường dẫn tương đối cũng hơi bật tiện thật, nên các module loader có một cơ chế config cho phép import trông như tuyệt đối , ví dụ webpack thì bằng NODE_PATH như trong bài, cho phép khi build code thì nó sẽ tìm code "trong thư mục được config". Ví dụ mình có thể dùng import React from 'react' và các module loader biết tìm react ở trong thư mục node_modules mà không cần phải chỉ ra đường dẫn cụ thể tới thư mục đó. Tuy nhiên, như đã nói, đây là tính năng của module loader, nên bắt buộc phải config chứ mặc định không thể hỗ trợ được.

Câu hỏi của bạn liên quan đến tool create-react-app hơn là React. React là package dùng để render React component. Nó không quan tâm đến việc bạn setup project như thế nào hay bạn làm thế nào để import được component. Đó là việc của các package như Webpack hay Rollup. Vì thế nên mới sinh ra cái tool create-react-app để mọi người nhanh chóng setup project react.

NODE_PATH thì thật ra vẫn chỉ là 1 workaround cho đến khi create-react-app thực sự support đường dẫn tuyệt đối chứ không phải là một cách hay. Tài liệu chính thức của NodeJS cũng không khuyến khích mọi người dùng NODE_PATH. Lúc mới support cái này create-react-app cũng gặp phải những vấn đề nghiêm trọng nên cuối cùng hiện tại chỉ support relative path cho NODE_PATH.

Mục đích ban đầu của NODE_PATH trong create-react-app là để cho những người có nhu cầu sử dụng create-react-app với monorepo. Kiểu thế này

/packages
  - react-app
  - components
  - sdk

Thì người ta sẽ set NODE_PATH=../components:../sdk để có thể import file từ folder components và sdk bằng đường dẫn tuyệt đối. Tóm lại là nó dành cho những người có nhu cầu sử dụng chứ không được khuyến khích.

Tuy nhiên các tutorial ở đâu cũng hướng dẫn bạn set NODE_PATH=src bởi vì nó là 1 use case rất phổ biến. Các framework hay tool tạo boilerplate như Next.js hay vue-cli đều support absolute path nên 1 tool phổ biến như create-react-app cũng không tránh khỏi người dùng đòi hỏi.

Thường thì để cho phép dùng absolute path mọi người sẽ dùng config resolve của webpack. Tác giả của create-react-app thì lại muốn tool này dành cho cả những người chưa biết gì về webpack cũng dùng được nên cách này cuối cùng vẫn không được support.