咨询ES6 import机制：为何导入Node模块无需路径？

Great question! Let's break down the mechanics behind ES6's import statement, and why you see that clear difference between third-party Node modules and your own custom files.

First, a quick foundational note: the ES6 spec itself doesn't define how to resolve module paths—it leaves that logic up to the host environment (like Node.js, or bundlers such as Webpack/Vite that power browser-based projects). These environments implement the lookup rules, and that's where the discrepancy comes from.

Importing Third-Party Node Modules #

When you write something like import React from 'react', here's the step-by-step flow:

• First, the environment checks if react is a built-in Node module (think fs or path). Since it's not, it moves to the next stage.
• It looks for a node_modules directory—starting from your project's root folder, and climbing up the directory tree if needed. This is the standardized location where all third-party packages are installed via npm/yarn/pnpm.
• Once it finds node_modules/react, it reads the package's package.json file to locate the entry point. Most packages specify this with the main field (e.g., "main": "index.js"), or increasingly the module field for ES-module-optimized builds.
• If there's no main field, it falls back to looking for an index.js (or other file extensions based on environment config) in the package's root directory.

This preset, standardized lookup flow means you don't need to specify a path—the environment already knows exactly where to look for installed packages.

Importing Custom Files/Components #

For your own code (like import Header from "./components/Header" or SCSS files), the environment has no default location to check. Here's why explicit paths are mandatory:

• Relative paths like ./ (current directory) or ../ (parent directory) tell the loader exactly where to start searching for your file. Without them, it would assume you're trying to load a third-party module from node_modules—which doesn't exist for your custom code, leading to an error.
• For example, ./components/Header translates to: "Start in the same folder as this file, navigate into the components directory, and load the Header file (with extensions like .jsx, .tsx, or .scss resolved based on your project's config)."

Quick Side Note on Bundler Aliases #

If you've seen projects use shortcuts like import Header from '@/components/Header', that's not bypassing the core import rule—it's just a bundler alias. Tools like Webpack or Vite let you map a shortcut (like @) to a specific directory (usually src/), so it's still resolving to an absolute path under the hood.

In Short #

The core difference boils down to preset lookup conventions:

• Third-party modules leverage the standardized node_modules directory and package entry point rules, so the environment can locate them without explicit paths.
• Your custom code has no default home, so you need to use relative/absolute paths to point the loader directly to where your file lives.

内容的提问来源于stack exchange，提问作者Bharat Sharma