【无标题】 - 技术栈

javascript 复制代码

// https://umijs.org/config/
import os from 'os';
import pageRoutes from './router.config';
import webpackPlugin from './plugin.config';
import defaultSettings from '../src/defaultSettings';
import slash from 'slash2';

const { pwa, primaryColor } = defaultSettings;
const { APP_TYPE, TEST } = process.env;
const plugins = [
  [
    'umi-plugin-react',
    {
      antd: true,
      dva: {
        hmr: true,
      },
      locale: {
        enable: false, // default false
        default: 'zh-CN', // default zh-CN
        baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
      },
      dynamicImport: {
        loadingComponent: './components/PageLoading/index',
        webpackChunkName: true,
        level: 3,
      },
      pwa: pwa
        ? {
            workboxPluginMode: 'InjectManifest',
            workboxOptions: {
              importWorkboxFrom: 'local',
            },
          }
        : false,
      ...(!TEST && os.platform() === 'darwin'
        ? {
            dll: {
              include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
              exclude: ['@babel/runtime', 'netlify-lambda'],
            },
            hardSource: false,
          }
        : {}),
    },
  ],
];

// 针对 preview.pro.ant.design 的 GA 统计代码
// 业务上不需要这个
if (APP_TYPE === 'site') {
  plugins.push([
    'umi-plugin-ga',
    {
      code: 'UA-72788897-6',
    },
  ]);
}

export default {
  // add for transfer to umi
  plugins,
  define: {
    APP_TYPE: APP_TYPE || '',
  },
  treeShaking: true,
  targets: {
    ie: 11,
  },
  hash: true,
  // 路由配置
  routes: pageRoutes,
  // Theme for antd
  // https://ant.design/docs/react/customize-theme-cn
  theme: {
    'primary-color': primaryColor,
  },
  proxy: {
    '/empty-item/': {
      target: 'http://127.0.0.1:4000/',
    },
  },

  ignoreMomentLocale: true,
  lessLoaderOptions: {
    javascriptEnabled: true,
  },
  disableRedirectHoist: true,
  cssLoaderOptions: {
    modules: true,
    getLocalIdent: (context, localIdentName, localName) => {
      if (
        context.resourcePath.includes('node_modules') ||
        context.resourcePath.includes('ant.design.pro.less') ||
        context.resourcePath.includes('global.less')
      ) {
        return localName;
      }
      const match = context.resourcePath.match(/src(.*)/);
      if (match && match[1]) {
        const antdProPath = match[1].replace('.less', '');
        const arr = slash(antdProPath)
          .split('/')
          .map(a => a.replace(/([A-Z])/g, '-$1'))
          .map(a => a.toLowerCase());
        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }
      return localName;
    },
  },
  manifest: {
    basePath: '/',
  },

  chainWebpack: webpackPlugin,
};

这段代码是一个 Umi 项目的配置文件，用于设置项目的各种配置选项。Umi 是一个可扩展的企业级前端应用框架，基于 React 和 Webpack。以下是对代码块中各部分的解释：

导入依赖项：

javascript 复制代码

import os from 'os';
import pageRoutes from './router.config';
import webpackPlugin from './plugin.config';
import defaultSettings from '../src/defaultSettings';
import slash from 'slash2';

这些导入语句分别从不同模块导入了所需的依赖项，包括操作系统相关的功能、路由配置、Webpack 插件配置、默认设置和一个用于处理路径的库。

获取默认设置中的配置项：

javascript 复制代码

const { pwa, primaryColor } = defaultSettings;

这里从 defaultSettings 对象中解构出了 pwa 和 primaryColor 两个变量，这些变量将用于后续的配置。

获取环境变量：

javascript 复制代码

const { APP_TYPE, TEST } = process.env;

这行代码从环境变量中获取了 APP_TYPE 和 TEST 的值，这些值通常在部署或运行时由外部设置。

定义插件数组：

javascript 复制代码

const plugins = [
  [
    'umi-plugin-react',
    {
      // ...插件配置...
    },
  ],
];

这里定义了一个名为 plugins 的数组，其中包含了一个插件配置数组。这个插件是针对 React 应用的，并配置了一些特定的选项，如是否启用 Ant Design、Dva 的配置、国际化设置、动态导入设置以及 PWA 配置。

根据条件添加额外的插件：

javascript 复制代码

if (APP_TYPE === 'site') {
  plugins.push([
    'umi-plugin-ga',
    {
      code: 'UA-72788897-6',
    },
  ]);
}

如果环境变量 APP_TYPE 的值为 'site'，则会向 plugins 数组中添加一个新的插件配置，用于 Google Analytics 统计。

导出默认配置对象：

javascript 复制代码

export default {
  // ...其他配置项...
};

最后，导出一个包含所有配置项的对象。这个对象包含了插件数组、定义的环境变量、路由配置、主题配置、代理配置、加载器选项、Webpack 链式操作配置等。

特别地，getLocalIdent 函数用于生成 CSS 类名，以确保在生产环境中的样式隔离：

javascript 复制代码

getLocalIdent: (context, localIdentName, localName) => {
  // ...函数实现...
},

这个函数根据资源路径和其他参数来生成一个独特的 CSS 类名，以便正确地应用样式。

整体来看，这段代码是一个典型的 Umi 配置文件，它通过组合各种配置项来定制项目的构建和运行时行为。