React App Framework - 10. Include App

背景

上次开发完单应用部署后, 又出现了一个类似的需求: 由于公司内部网络环境的问题, 部分子应用需要部署在另一个不互通的内网中

实现方式

有上次单应用的开发经验后, 这次就比较简单了, 直接通过一个传参来筛选需要的子应用即可, 这次同时实现白名单和黑名单功能, 方便使用

webpack配置

// webpack.build-app.config.js
const plugins = [];

const includeApp = process.env.INCLUDE_APP || '';
const excludeApp = process.env.EXCLUDE_APP || '';

const defaultDefineVariables = {
  'process.env.include-app': `null`,
};

if (includeApp && excludeApp) {
  throw new Error('includeApp and excludeApp can not be set at the same time');
}

let includeAppList = [];
if (includeApp || excludeApp) {
  if (includeApp) {
    includeAppList = includeApp.split(',');
  } else if (excludeApp) {
    includeAppList = _.difference(apps, excludeApp.split(','));
  }
}

if (includeAppList.length) {
  const errorApps = _.difference(includeAppList, apps);
  if (errorApps.length) {
    throw new Error(`Select error app: [${errorApps.join(',')}], app should in ${apps.join(', ')}`);
  }
  console.info(`Build app: ${includeAppList.join(',')}`);
  defaultDefineVariables['process.env.include-app'] = `[${includeAppList.map((app) => `'${app}'`).join(',')}]`;
  plugins.push(
    new webpack.IgnorePlugin({
      resourceRegExp: new RegExp(`^\\.[/\\\\](${apps.filter((app) => !includeAppList.includes(app)).join('|')})[/\\\\]`),
    }),
  );
}

constants配置

// config/constants.ts
const INCLUDE_APPS: string[] = process.env['include-app'];

if (INCLUDE_APPS.length) {
  _.map(_.difference(_.keys(APPS), INCLUDE_APPS), (app) => {
    Reflect.deleteProperty(APPS, app);
  });
}

使用

INCLUDE_APP=app1,app2 npm run build
npm run build -- --include-app=app1,app2