React Native(Expo)中用package.json配置别名实现绝对导入的原理是什么？

这个问题问得很好！这种用目录内package.json实现别名导入的方式，本质是蹭了Node.js模块解析机制的"原生福利"，再加上Expo/React Native用的打包工具对这套规则的完美兼容，让你能把本地目录当成一个"虚拟npm包"来引用。下面我拆解一下细节：

1. 核心原理：Node.js的模块查找逻辑 #

当你写import '@someDir/something'时，Node.js（以及遵循其规则的打包工具）会按照固定顺序找模块：

• 先检查是不是fs、path这种内置模块
• 如果不是，看到@someDir这种带作用域的名字，它本来会去node_modules里找对应的包，但如果你的项目里某个目录（比如src/someDir）下有个package.json，且name字段正好是@someDir，那Node就会把这个目录直接认定为@someDir包的根目录，然后在里面找something对应的文件。

举个实际的例子：
你在src/someDir里建的package.json内容就这么简单：

{
  "name": "@someDir"
}

这时你在项目任何地方写import '@someDir/utils'，打包工具都会直接定位到src/someDir/utils.js（或者.tsx、.jsx这类对应扩展名的文件），完全不用写烦人的../../someDir/utils这种相对路径。

2. Expo React Native里的实现机制 #

Expo默认用的是Metro作为打包工具，而Metro的模块解析逻辑完全对齐Node.js的规则——它会遍历你的项目目录，自动识别带有package.json的目录作为模块根。这也是为什么你不需要改任何Metro配置，只要加个小package.json就能生效的原因。

这种方式的好处很明显：

• 不用碰复杂的打包配置，轻量化解决问题
• 遵循Node生态的原生规范，换用其他工具（比如Webpack项目）也能直接用
• 以后要是移动someDir的位置，只要带着这个package.json一起移，所有导入路径都不用改，完美解决了相对导入"牵一发而动全身"的痛点

3. 和Webpack的关系？ #

Webpack本身也支持这种方式，因为它同样遵循Node.js的模块解析规则。不过Webpack里更常见的是用resolve.alias配置别名（比如alias: {'@someDir': path.resolve(__dirname, 'src/someDir')}），但两种方式的核心逻辑是相通的：都是告诉打包工具，遇到某个模块名时，映射到本地的某个目录。

两者的区别在于：

• 目录内package.json的方式是原生Node规则，不需要额外配置打包工具，适合想保持配置简洁的场景
• Webpack的resolve.alias是打包工具层面的配置，灵活性更高（比如可以映射到任意路径，不一定是带package.json的目录）

而你用的是Expo React Native项目，它用的是Metro不是Webpack，所以你这个方案生效和Webpack没关系，核心是Metro对Node模块解析规则的支持。

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