import react from "react";
import util from "./utils.js";
import config from "#config";

react      -> file:///project/node_modules/react/index.js
./utils.js -> file:///project/src/utils.js
#config    -> file:///project/src/config/index.js

module
commonjs
json
wasm

specifier
    ↓
resolved URL
    ↓
module format
    ↓
load
    ↓
execute

ESM_RESOLVE(specifier, parentURL)

判断 specifier 类型

URL
路径
#imports
裸包名

        ↓

解析得到 URL

        ↓

检查文件是否合法

        ↓

判断模块格式

        ↓

返回给 Loader

specifier
      ↓
唯一 URL

import x from "file:///app/src/a.js";

import x from "data:text/javascript,export default 1";

new URL(specifier)

import x from "./foo.js";
import y from "../bar.js";

file:///app/src/main.js

import "./utils.js";

file:///app/src/utils.js

new URL("./utils.js", parentURL)

import db from "#db";

import logger from "#utils/logger";

#

PACKAGE_IMPORTS_RESOLVE()

{
  "imports": {
    "#db": "./src/db/index.js",
    "#utils/*": "./src/utils/*.js"
  }
}

import db from "#db";

./src/db/index.js

import react from "react";

import lodash from "lodash";

import axios from "axios";

URL
路径
#import

PACKAGE_RESOLVE()

import react from "react";

/app/src/pages/home/index.js

/app/src/pages/home/node_modules/react
/app/src/pages/node_modules/react
/app/src/node_modules/react
/app/node_modules/react
/node_modules/react

while(currentDirectory){
    查找 node_modules/packageName
    找不到继续向上
}

node_modules/react/package.json

exports
    ↓
main
    ↓
直接路径

{
  "exports": {
    ".": "./dist/index.js",
    "./jsx-runtime": "./dist/jsx-runtime.js"
  }
}

import React from "react";

.

./dist/index.js

import jsx from "react/jsx-runtime";

./jsx-runtime

./dist/jsx-runtime.js

import internal from "react/internal";

"./internal"

Package Path Not Exported

包对外暴露的公开 API

{
  "exports": {
    ".": "./dist/index.js",
    "./api": "./dist/api.js"
  }
}

import x from "my-lib";
import y from "my-lib/api";

import z from "my-lib/dist/internal.js";

{
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs",
      "default": "./dist/index.js"
    }
  }
}

import x from "lib";

"import"

./dist/index.mjs

require("lib");

"require"

./dist/index.cjs

{
  "name": "my-lib",
  "exports": {
    ".": "./src/index.js",
    "./core": "./src/core.js"
  }
}

my-lib

import core from "my-lib/core";

当前包名就是 my-lib

PACKAGE_SELF_RESOLVE

exports 给别人用
imports 给自己用

{
  "imports": {
    "#db": "./src/db/index.js",
    "#utils/*": "./src/utils/*.js"
  }
}

import db from "#db";

./src/db/index.js

import stringUtil from "#utils/string.js";

./src/utils/string.js

{
  "exports": {
    "./features/*": "./src/features/*.js"
  }
}

import user from "pkg/features/user";

*

user

./src/features/user.js

{
  "exports": {
    ".": "./dist/index.js"
  }
}

{
  "exports": {
    ".": {
      "node": "./node.js",
      "browser": "./browser.js",
      "default": "./index.js"
    }
  }
}

{
  "exports": {
    ".": [
      "./native.js",
      "./fallback.js"
    ]
  }
}

{
  "exports": {
    "./internal/*": null
  }
}

这个文件应该按什么格式加载？

module

commonjs

json

wasm

addon

.js

{
  "type": "module"
}

app.js

ESM

{
  "type": "commonjs"
}

app.js

CommonJS

.mjs

.cjs

.js

require("./foo");

foo.js
foo.json
foo.node
foo/index.js
foo/index.json

import "./foo";

foo

Unsupported Directory Import

import "./foo/index.js";

import "./foo.js";

当前目录
      ↓
父目录
      ↓
继续向上
      ↓
直到根目录

/app/src/pages/home/index.js

/app/src/pages/home/package.json
/app/src/pages/package.json
/app/src/package.json
/app/package.json

import x from "./a.js";
import y from "react";

import x from "@/utils";

Loader Hook

import { pathToFileURL } from "node:url";
import path from "node:path";

export async function resolve(
  specifier,
  context,
  nextResolve
) {
  if (specifier.startsWith("@/")) {
    return {
      url: pathToFileURL(
        path.resolve(
          process.cwd(),
          "src",
          specifier.slice(2)
        )
      ).href,
      shortCircuit: true
    };
  }

  return nextResolve(specifier, context);
}

node --loader ./loader.mjs app.js

import util from "@/utils.js";

src/utils.js

import specifier
        ↓
ESM_RESOLVE
        ↓
判断类型

URL
路径
#imports
裸包名

        ↓

PACKAGE_RESOLVE

        ↓

exports
imports
main

        ↓

得到最终 URL

        ↓

ESM_FILE_FORMAT

        ↓

module
commonjs
json
wasm

        ↓

Loader

        ↓

Execute

specifier
      ↓
确定 URL
      ↓
确定模块格式
      ↓
加载执行