如何在NX单体仓库的共享库中检测当前运行的应用

方案1：利用NX自动注入的环境变量 #

NX在运行或构建应用时，会自动将当前项目名称注入到环境变量NX_CURRENT_PROJECT中，你可以直接在共享库中读取这个变量来判断当前应用：

// 共享库中的检测代码
const currentApp = process.env.NX_CURRENT_PROJECT;

switch(currentApp) {
  case 'react-site-1':
    // 第一个React网站的逻辑
    break;
  case 'react-site-2':
    // 第二个React网站的逻辑
    break;
  case 'mobile-app':
    // 移动应用的逻辑
    break;
  default:
    // 未知应用的 fallback 逻辑
}

注意：这个变量仅在通过NX命令（如nx serve <app-name>、nx build <app-name>）运行时生效，无需额外配置。

方案2：通过应用入口传递标识 #

在每个应用的入口文件中主动设置当前应用的标识，共享库通过工具函数读取该标识：

1. 在共享库中创建一个工具模块：

// shared-utils/src/lib/app-detector.ts
let activeApp: string | undefined;

export const setActiveApp = (appName: string) => {
  activeApp = appName;
};

export const getActiveApp = () => activeApp;

2. 在每个应用的入口文件中调用setActiveApp：

• React网站入口（如apps/react-site-1/src/main.tsx）：

import { setActiveApp } from '@your-workspace/shared-utils';

// 在渲染应用前设置标识
setActiveApp('react-site-1');

// 后续的应用渲染逻辑
ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

• 移动应用入口（如apps/mobile-app/src/index.js）：

import { setActiveApp } from '@your-workspace/shared-utils';

setActiveApp('mobile-app');

// 移动应用的初始化逻辑
AppRegistry.registerComponent(appName, () => App);

3. 在共享库的任意位置调用getActiveApp()获取当前应用标识：

import { getActiveApp } from '@your-workspace/shared-utils';

const currentApp = getActiveApp();
if (currentApp === 'mobile-app') {
  // 执行移动应用专属逻辑
}

这个方案的优势是不受环境变量限制，打包后依然能正常工作，且支持自定义标识名称。

方案3：通过构建工具注入全局变量 #

针对不同类型的应用，通过webpack（React网站）或metro/babel（移动应用）注入自定义全局变量：

针对React网站（Webpack配置） #

1. 在目标应用的project.json中指定自定义webpack配置：

{
  "targets": {
    "serve": {
      "executor": "@nx/webpack:dev-server",
      "options": {
        "webpackConfig": "apps/react-site-1/webpack.config.js"
      }
    },
    "build": {
      "executor": "@nx/webpack:webpack",
      "options": {
        "webpackConfig": "apps/react-site-1/webpack.config.js"
      }
    }
  }
}

2. 在webpack.config.js中使用DefinePlugin注入变量：

const { composePlugins, withNx } = require('@nx/webpack');
const webpack = require('webpack');

module.exports = composePlugins(withNx(), (config) => {
  config.plugins.push(
    new webpack.DefinePlugin({
      'process.env.CURRENT_APP': JSON.stringify('react-site-1')
    })
  );
  return config;
});

针对移动应用（React Native） #

1. 在应用的.env文件中添加标识：

CURRENT_APP=mobile-app

2. 修改babel.config.js，使用babel-plugin-transform-inline-environment-variables注入变量：

module.exports = {
  presets: ['module:@nx/react-native/babel'],
  plugins: [
    ['transform-inline-environment-variables', { include: ['CURRENT_APP'] }]
  ]
};

完成配置后，共享库中即可通过process.env.CURRENT_APP读取当前应用标识。

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