【无标题】

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。以下是对代码块中各部分的解释:

  1. 导入依赖项:
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 插件配置、默认设置和一个用于处理路径的库。

  1. 获取默认设置中的配置项:
javascript 复制代码
const { pwa, primaryColor } = defaultSettings;

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

  1. 获取环境变量:
javascript 复制代码
const { APP_TYPE, TEST } = process.env;

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

  1. 定义插件数组:
javascript 复制代码
const plugins = [
  [
    'umi-plugin-react',
    {
      // ...插件配置...
    },
  ],
];

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

  1. 根据条件添加额外的插件:
javascript 复制代码
if (APP_TYPE === 'site') {
  plugins.push([
    'umi-plugin-ga',
    {
      code: 'UA-72788897-6',
    },
  ]);
}

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

  1. 导出默认配置对象:
javascript 复制代码
export default {
  // ...其他配置项...
};

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

  1. 特别地,getLocalIdent 函数用于生成 CSS 类名,以确保在生产环境中的样式隔离:
javascript 复制代码
getLocalIdent: (context, localIdentName, localName) => {
  // ...函数实现...
},

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

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

相关推荐
迷雾漫步者1 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-2 小时前
验证码机制
前端·后端
燃先生._.3 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖4 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235244 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240255 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar5 小时前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人6 小时前
前端知识补充—CSS
前端·css
GISer_Jing6 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试