React项目用Parcel配置绝对路径遇解析错误的解决方法

方案1：使用package.json的imports字段（Parcel 2+推荐） #

这是Parcel官方推荐的方式，可读性和兼容性更好：

• 在项目根目录的package.json中添加如下配置：

  "imports": {
    "#components/*": "./src/components/*",
    "#utils/*": "./src/utils/*",
    "#styles/*": "./src/styles/*"
  }
  

• 之后在代码中引用模块时，使用自定义的别名前缀：

  import ThisComponent from '#components/thisComponent/thisComponent.jsx';
  

方案2：配置jsconfig.json/tsconfig.json实现根路径映射 #

如果偏好直接使用/components这类根路径格式：

1. 在项目根目录创建jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目）：
   • JavaScript项目的jsconfig.json：

     {
       "compilerOptions": {
         "baseUrl": "./src",
         "paths": {
           "/*": ["*"]
         }
       },
       "include": ["src"]
     }
     

   • TypeScript项目的tsconfig.json，在原有compilerOptions中添加：

     "compilerOptions": {
       // 其他已有配置...
       "baseUrl": "./src",
       "paths": {
         "/*": ["*"]
       }
     }
     

2. 配置完成后，直接用绝对路径引用：

   import ThisComponent from '/components/thisComponent/thisComponent.jsx';
   

Parcel 2会自动读取上述配置文件中的路径映射规则，同时编辑器的Ctrl+Click跳转功能也能正常工作。

注意事项 #

• 确保你使用的是Parcel 2.x版本，Parcel 1的路径配置逻辑不同，建议升级到最新稳定版。
• 若想使用~作为别名前缀，需要在配置文件的paths中手动映射：比如添加"~/*": ["src/*"]，之后用~/components/xxx格式引用即可。

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