config.ts

// https://umijs.org/config/
import os from 'os';
import slash from 'slash2';
import { IPlugin, IConfig } from 'umi-types';
import defaultSettings from './defaultSettings';
import webpackPlugin from './plugin.config'; // webpack相关配置

import routes from './routes.config';
import theme from './theme.config';

const path = require('path');

const { pwa } = defaultSettings; // preview.pro.ant.design only do not use in your production ;
// preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。

const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, TEST, NODE_ENV } = process.env; // 插件设置

const plugins: IPlugin[] = [
  [
    'umi-plugin-react',
    {
      antd: true,
      dva: {
        hmr: true,
      },
      locale: {
        // default false
        enable: true,
        // default zh-CN
        default: 'zh-CN',
        // default true, when it is true, will use `navigator.language` overwrite default
        baseNavigator: true,
      },
      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,
          }
        : {}),
    },
  ],
  [
    'umi-plugin-pro-block',
    {
      moveMock: false,
      moveService: false,
      modifyRequest: true,
      autoAddMenu: true,
    },
  ],
]; // 针对 preview.pro.ant.design 的 GA 统计代码
// preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。

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

const uglifyJSOptions =
  NODE_ENV === 'production'
    ? {
        uglifyOptions: {
          // remove console.* except console.error
          compress: {
            drop_console: true,
            pure_funcs: ['console.error'],
          },
        },
      }
    : {};
export default {
  // add for transfer to umi
  plugins,
  define: {
    // 'process.env.APP_NAME': 'http://platform.kuopu.net:9008',
    ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION:
      ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION || '', // preview.pro.ant.design only do not use in your production ; preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。
  },
  // 配置是否开启 treeShaking，默认关闭。
  treeShaking: true,
  // 配置浏览器最低版本，会自动引入 polyfill 和做语法转换，配置的 targets 会和合并到默认值，所以不需要重复配置。
  targets: {
    ie: 11,
  },
  // 打包后源码 umi已经根据不同环境有默认的源码生成规则
  devtool: false,
  // 路由配置
  routes: [
    {
      path: '/',
      component: '../layouts/BlankLayout',
      routes: [
        {
          path: '/user',
          component: '../layouts/UserLayout',
          routes: [
            {
              path: '/user',
              redirect: '/user/login',
            },
            {
              name: 'login',
              path: '/user/login',
              component: './user/login',
            },
          ],
        },
        {
          path: '/',
          component: '../layouts/BasicLayout',
          Routes: ['src/pages/Authorized'],
          authority: ['admin', 'user'],
          routes: [
            {
              path: '/dashboard',
              name: 'dashboard',
              icon: 'dashboard',
              routes: [],
            },
            {
              path: '/form',
              icon: 'form',
              name: 'form',
              routes: [],
            },
            {
              path: '/list',
              icon: 'table',
              name: 'list',
              routes: [
                {
                  path: '/list/search',
                  name: 'search-list',
                  component: './list/search',
                  routes: [
                    {
                      path: '/list/search',
                      redirect: '/list/search/articles',
                    },
                  ],
                },
              ],
            },
            {
              path: '/profile',
              name: 'profile',
              icon: 'profile',
              routes: [],
            },
            {
              name: 'result',
              icon: 'check-circle-o',
              path: '/result',
              routes: [],
            },
            {
              name: 'exception',
              icon: 'warning',
              path: '/exception',
              routes: [],
            },
            {
              name: 'account',
              icon: 'user',
              path: '/account',
              routes: [],
            },
            {
              name: 'editor',
              icon: 'highlight',
              path: '/editor',
              routes: [],
            },
            {
              path: '/',
              redirect: '/dashboard/analysis',
              authority: ['admin', 'user'],
            },
          ],
        },
      ],
    },
  ],
  // Theme for antd
  // https://ant.design/docs/react/customize-theme-cn
  theme,
  //忽略 moment 的 locale 文件，用于减少尺寸。
  ignoreMomentLocale: true,
  //给 less-loader 的额外配置项
  lessLoaderOptions: {
    // 开启此项,less中能够使用函数 https://github.com/webpack-contrib/less-loader/issues/249
    javascriptEnabled: true,
  },
  // 禁用 redirect 上提
  disableRedirectHoist: true,
  // 给 css-loader 的额外配置项
  cssLoaderOptions: {
    // 开启css modules
    modules: true,
    // 生成classname的规则
    getLocalIdent: (
      context: {
        resourcePath: string;
      },
      localIdentName: string,
      localName: string
    ) => {
      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: string) => a.replace(/([A-Z])/g, '-$1'))
          .map((a: string) => a.toLowerCase());
        return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
      }

      return localName;
    },
  },
  // 配置后会生成 asset-manifest.json，option 传给 https://www.npmjs.com/package/webpack-manifest-plugin
  manifest: {
    basePath: '/',
  },
  // 配置传给 uglifyjs-webpack-plugin@1.x 的配置项。
  uglifyJSOptions,
  // 通过 webpack-chain 的 API 扩展或修改 webpack 配置。
  chainWebpack: webpackPlugin,
  // 配置 webpack 的 resolve.alias 属性 默认src=>@
  alias: {
    src: path.join(__dirname, '../src'),
    components: path.join(__dirname, '../src', 'components'),
    utils: path.join(__dirname, '../src', 'utils'),
    assets: path.join(__dirname, '../src', 'assets'),
    themes: path.join(__dirname, '../src', 'themes'),
    config: path.join(__dirname, '../src', 'config'),
    public: path.join(__dirname, '../public'),
  },
} as IConfig;