package.json中alias字段的来源、作用及JS实现方法咨询

1. alias字段的来源 #

这个alias字段并非TSDX专属，也不是TypeScript的特性，而是Parcel打包工具（示例中使用的是Parcel 1.12.3）支持的自定义配置项。Parcel 1.x允许直接在package.json中通过alias字段定义模块解析的路径映射，用来替换默认的模块查找逻辑。

2. alias字段的具体作用 #

核心作用是解决monorepo中React模块重复实例的问题：
当monorepo里的共享库（shared-library）和示例项目（example）各自安装React时，会导致项目中出现多个React实例，进而引发React Hooks的经典错误（如Invalid hook call）——因为Hooks要求必须在同一个React实例的上下文里调用。

示例中的三个别名配置，就是强制让示例项目的react、react-dom、scheduler/tracing模块，都去加载共享库node_modules下的对应包，确保整个项目（示例+共享库）共用同一套React相关依赖，彻底避免重复加载和实例冲突。

3. JS项目中实现相同效果的方式 #

这个方案本质是打包工具的模块路径映射，和TypeScript无关，JS项目只需根据自己使用的打包工具配置路径别名即可：

Parcel（1.x/2.x） #

• 1.x和示例完全一致，直接在package.json中添加alias字段即可
• 2.x也兼容package.json的alias配置，或者可以通过.parcelrc配合@parcel/resolver-alias插件做更精细的配置

Webpack #

在webpack.config.js的resolve.alias中配置：

const path = require('path');

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'react': path.resolve(__dirname, '../shared-library/node_modules/react'),
      'react-dom': path.resolve(__dirname, '../shared-library/node_modules/react-dom/profiling'),
      'scheduler/tracing': path.resolve(__dirname, '../shared-library/node_modules/scheduler/tracing-profiling')
    }
  }
};

Vite #

在vite.config.js的resolve.alias中配置：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      'react': path.resolve(__dirname, '../shared-library/node_modules/react'),
      'react-dom': path.resolve(__dirname, '../shared-library/node_modules/react-dom/profiling'),
      'scheduler/tracing': path.resolve(__dirname, '../shared-library/node_modules/scheduler/tracing-profiling')
    }
  }
});

Create React App（CRA） #

CRA默认不允许直接修改webpack配置，需要借助craco或react-app-rewired覆盖配置。以craco为例，在craco.config.js中添加：

const path = require('path');

module.exports = {
  webpack: {
    alias: {
      'react': path.resolve(__dirname, '../shared-library/node_modules/react'),
      'react-dom': path.resolve(__dirname, '../shared-library/node_modules/react-dom/profiling'),
      'scheduler/tracing': path.resolve(__dirname, '../shared-library/node_modules/scheduler/tracing-profiling')
    }
  }
};

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