// 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 falsedefault: 'zh-CN', // default zh-CNbaseNavigator: 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 umiplugins,define: {APP_TYPE: APP_TYPE || '',},treeShaking: true,targets: {ie: 11,},hash: true,// 路由配置routes: pageRoutes,// Theme for antd// https://ant.design/docs/react/customize-theme-cntheme: {'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。以下是对代码块中各部分的解释：
- 导入依赖项：
import os from 'os';
import pageRoutes from './router.config';
import webpackPlugin from './plugin.config';
import defaultSettings from '../src/defaultSettings';
import slash from 'slash2';
这些导入语句分别从不同模块导入了所需的依赖项，包括操作系统相关的功能、路由配置、Webpack 插件配置、默认设置和一个用于处理路径的库。
- 获取默认设置中的配置项：
const { pwa, primaryColor } = defaultSettings;
这里从 defaultSettings 对象中解构出了 pwa 和 primaryColor 两个变量，这些变量将用于后续的配置。
- 获取环境变量：
const { APP_TYPE, TEST } = process.env;
这行代码从环境变量中获取了 APP_TYPE 和 TEST 的值，这些值通常在部署或运行时由外部设置。
- 定义插件数组：
const plugins = [['umi-plugin-react',{// ...插件配置...},],
];
这里定义了一个名为 plugins 的数组，其中包含了一个插件配置数组。这个插件是针对 React 应用的，并配置了一些特定的选项，如是否启用 Ant Design、Dva 的配置、国际化设置、动态导入设置以及 PWA 配置。
- 根据条件添加额外的插件：
if (APP_TYPE === 'site') {plugins.push(['umi-plugin-ga',{code: 'UA-72788897-6',},]);
}
如果环境变量 APP_TYPE 的值为 'site'，则会向 plugins 数组中添加一个新的插件配置，用于 Google Analytics 统计。
- 导出默认配置对象：
export default {// ...其他配置项...
};
最后，导出一个包含所有配置项的对象。这个对象包含了插件数组、定义的环境变量、路由配置、主题配置、代理配置、加载器选项、Webpack 链式操作配置等。
- 特别地，
getLocalIdent函数用于生成 CSS 类名，以确保在生产环境中的样式隔离：
getLocalIdent: (context, localIdentName, localName) => {// ...函数实现...
},
这个函数根据资源路径和其他参数来生成一个独特的 CSS 类名，以便正确地应用样式。
整体来看，这段代码是一个典型的 Umi 配置文件，它通过组合各种配置项来定制项目的构建和运行时行为。
