如何为私有Node依赖配置导入别名以兼容原有绝对路径导入？

方案1：组件库构建阶段预解析别名（最推荐，零上层侵入） #

你完全不需要修改现有组件的导入代码，只需要在组件库自身的构建配置中加入和原项目一致的别名规则，打包时构建工具会自动把所有别名导入替换为正确的相对路径，发布后的依赖包不存在任何别名依赖，上层Vite/ Webpack项目无需额外配置即可直接使用。

配置示例 #

如果用Vite打包组件库，在组件库的vite.config.js中添加如下配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      // 和原项目Webpack别名配置保持一致即可
      'components': path.resolve(__dirname, 'src/components'),
      'views': path.resolve(__dirname, 'src/views'),
      'utils': path.resolve(__dirname, 'src/utils')
    }
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, 'src/index.js'),
      name: 'CoreLib',
      fileName: (format) => `core.${format}.js`
    },
    rollupOptions: {
      // 排除React等公共依赖，避免重复打包
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
})

如果用Rollup/ Webpack打包组件库，只需要安装对应的别名插件，配置相同的别名规则即可。

方案2：package.json exports 子路径映射（适合直接发布源码的场景） #

如果你不想对组件库进行打包，直接发布源码作为依赖，可以在组件库的package.json中配置exports字段实现依赖层的路径映射：

{
  "name": "core",
  "version": "1.0.0",
  "main": "./src/index.js",
  "exports": {
    "./components/*": "./src/components/*",
    "./views/*": "./src/views/*",
    "./utils/*": "./src/utils/*"
  }
}

配置后上层项目可以通过如下方式导入，不需要修改组件内部代码：

import Button from 'core/components/shared/Button'

如果要完全保留原项目import Button from 'components/shared/Button'的写法，只需要在上层Vite项目中加一行别名配置即可：

// 上层Vite项目的vite.config.js
resolve: {
  alias: {
    'components': path.resolve(__dirname, 'node_modules/core/src/components')
  }
}

关于细粒度scope包拆分方案的说明 #

你提到的拆分为@core/components、@core/views等独立scope包的方案是可行的，适合组件规模大、不同类别组件迭代节奏差异大的场景，每个包可以单独管理版本和发布。但该方案维护成本较高，需要处理多包依赖、版本同步等问题，如果团队规模较小、组件耦合度较高，优先选择前两种方案即可。

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