ant-design-pro config

config

  1. // ref: https://umijs.org/config/
  2. import os from 'os';
  3. import pageRoutes from './router.config';
  4. import defaultSettings from '../src/defaultSettings';
  5. import slash from 'slash2';
  7. const { pwa, primaryColor } = defaultSettings;
  8. const { APP_TYPE, TEST } = process.env;
  10. const plugins = [
  11.   [
  12.     'umi-plugin-react',
  13.     {
  14.       antd: true,
  15.       dva: {
  16.         hmr: true,
  17.       },
  18.       locale: {
  19.         enable: true, // default false
  20.         default: 'zh-CN', // default zh-CN
  21.         baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
  22.       },
  23.       dynamicImport: {
  24.         loadingComponent: './components/PageLoading/index',
  25.         webpackChunkName: true,
  26.         level: 3,
  27.       },
  28.       pwa: pwa
  29.         ? {
  30.             workboxPluginMode: 'InjectManifest',
  31.             workboxOptions: {
  32.               importWorkboxFrom: 'local',
  33.             },
  34.           }
  35.         : false,
  36.       ...(!TEST && os.platform() === 'darwin'
  37.         ? {
  38.             dll: {
  39.               include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
  40.               exclude: ['@babel/runtime', 'netlify-lambda'],
  41.             },
  42.             hardSource: false,
  43.           }
  44.         : {}),
  45.     },
  46.   ],
  47. ];
  49. // 针对 preview.pro.ant.design 的 GA 统计代码
  50. // 业务上不需要这个
  51. if (APP_TYPE === 'site') {
  52.   plugins.push([
  53.     'umi-plugin-ga',
  54.     {
  55.       code: 'UA-72788897-6',
  56.     },
  57.   ]);
  58. }
  60. export default {
  61.   plugins: [
  62.     [
  63.       'umi-plugin-react',
  64.       {
  65.         antd: true,
  66.         dva: {
  67.           hmr: true,
  68.         },
  69.         targets: {
  70.           ie: 11,
  71.         },
  72.         locale: {
  73.           enable: true, // default false
  74.           default: 'zh-CN', // default zh-CN
  75.           baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
  76.         },
  77.         dynamicImport: {
  78.           loadingComponent: './components/PageLoading/index',
  79.         },
  80.       },
  81.     ],
  82.     [
  83.       'umi-plugin-pro-block',
  84.       {
  85.         moveMock: false,
  86.         moveService: false,
  87.         modifyRequest: true,
  88.         autoAddMenu: true,
  89.       },
  90.     ],
  91.   ],
  92.   define: {
  93.     APP_TYPE: process.env.APP_TYPE || '',
  94.   },
  95.   targets: {
  96.     ie: 11,
  97.   },
  98.   /**
  99.    * 路由相关配置
  100.    */
  101.   routes: pageRoutes,
  102.   /**
  103.    * webpack 相关配置
  104.    */
  105.   // Theme for antd
  106.   // https://ant.design/docs/react/customize-theme-cn
  107.   theme: {
  108.     'primary-color': primaryColor,
  109.   },
  110.   externals: {
  111.     '@antv/data-set': 'DataSet',
  112.   },
  113.   ignoreMomentLocale: true,
  114.   lessLoaderOptions: {
  115.     javascriptEnabled: true,
  116.   },
  117.   disableRedirectHoist: true,
  118.   cssLoaderOptions: {
  119.     modules: true,
  120.     getLocalIdent: (context, localIdentName, localName) => {
  121.       if (
  122.         context.resourcePath.includes('node_modules') ||
  123.         context.resourcePath.includes('ant.design.pro.less') ||
  124.         context.resourcePath.includes('global.less')
  125.       ) {
  126.         return localName;
  127.       }
  128.       const match = context.resourcePath.match(/src(.*)/);
  129.       if (match && match[1]) {
  130.         const antdProPath = match[1].replace('.less', '');
  131.         const arr = slash(antdProPath)
  132.           .split('/')
  133.           .map(a => a.replace(/([A-Z])/g, '-$1'))
  134.           .map(a => a.toLowerCase());
  135.         return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-');
  136.       }
  137.       return localName;
  138.     },
  139.   },
  140.   manifest: {
  141.     basePath: '/',
  142.   },
  143. };

plugin.config

  1. // Change theme plugin
  3. import MergeLessPlugin from 'antd-pro-merge-less';
  4. import AntDesignThemePlugin from 'antd-theme-webpack-plugin';
  5. import path from 'path';
  7. function getModulePackageName(module) {
  8.   if (!module.context) return null;
  10.   const nodeModulesPath = path.join(__dirname, '../node_modules/');
  11.   if (module.context.substring(0, nodeModulesPath.length) !== nodeModulesPath) {
  12.     return null;
  13.   }
  15.   const moduleRelativePath = module.context.substring(nodeModulesPath.length);
  16.   const [moduleDirName] = moduleRelativePath.split(path.sep);
  17.   let packageName = moduleDirName;
  18.   // handle tree shaking
  19.   if (packageName.match('^_')) {
  20.     // eslint-disable-next-line prefer-destructuring
  21.     packageName = packageName.match(/^_(@?[^@]+)/)[1];
  22.   }
  23.   return packageName;
  24. }
  26. export default config => {
  27.   // pro 和 开发环境再添加这个插件
  28.   if (process.env.APP_TYPE === 'site' || process.env.NODE_ENV !== 'production') {
  29.     // 将所有 less 合并为一个供 themePlugin使用
  30.     const outFile = path.join(__dirname, '../.temp/ant-design-pro.less');
  31.     const stylesDir = path.join(__dirname, '../src/');
  33.     config.plugin('merge-less').use(MergeLessPlugin, [
  34.       {
  35.         stylesDir,
  36.         outFile,
  37.       },
  38.     ]);
  40.     config.plugin('ant-design-theme').use(AntDesignThemePlugin, [
  41.       {
  42.         antDir: path.join(__dirname, '../node_modules/antd'),
  43.         stylesDir,
  44.         varFile: path.join(__dirname, '../node_modules/antd/lib/style/themes/default.less'),
  45.         mainLessFile: outFile, //     themeVariables: ['@primary-color'],
  46.         indexFileName: 'index.html',
  47.         generateOne: true,
  48.         lessUrl: 'https://gw.alipayobjects.com/os/lib/less.js/3.8.1/less.min.js',
  49.       },
  50.     ]);
  51.   }
  52.   // optimize chunks
  53.   config.optimization
  54.     .runtimeChunk(false) // share the same chunks across different modules
  55.     .splitChunks({
  56.       chunks: 'async',
  57.       name: 'vendors',
  58.       maxInitialRequests: Infinity,
  59.       minSize: 0,
  60.       cacheGroups: {
  61.         vendors: {
  62.           test: module => {
  63.             const packageName = getModulePackageName(module);
  64.             if (packageName) {
  65.               return ['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0;
  66.             }
  67.             return false;
  68.           },
  69.           name(module) {
  70.             const packageName = getModulePackageName(module);
  72.             if (['bizcharts', '@antv_data-set'].indexOf(packageName) >= 0) {
  73.               return 'viz'; // visualization package
  74.             }
  75.             return 'misc';
  76.           },
  77.         },
  78.       },
  79.     });
  80. };

router.config

  1. export default [
  2.   //user
  3.   {
  4.     path: '/user',
  5.     component: '../layouts/UserLayout',
  6.     routes: [
  7.       { path: '/user', redirect: '/user/login' },
  8.       { path: '/user/login', name: 'login', component: './User/Login' },
  9.       { path: '/user/register', name: 'register', component: './User/Register' },
  10.       {
  11.         path: '/user/register-result',
  12.         name: 'register.result',
  13.         component: './User/RegisterResult',
  14.       },
  15.       {
  16.         component: '404',
  17.       },
  18.     ],
  19.   },
  20.   //app
  21.   {
  22.     path: '/',
  23.     component: '../layouts/BasicLayout',
  24.     Routes: ['src/pages/Authorized'],
  25.     routes: [
  26.       //dashboard
  27.       { path: '/', redirect: '/dashboard/analysis', authority: ['admin', 'user'] },
  28.       {
  29.         path: '/dashboard',
  30.         name: 'dashboard',
  31.         icon: 'dashboard',
  32.         routes: [
  33.           {
  34.             path: '/dashboard/analysis',
  35.             name: 'analysis',
  36.             component: './Dashboard/Analysis',
  37.           },
  38.         ],
  39.       },
  40.     ],
  41.   },
  42. ]

pro-umi-config

config

  1. // ref: https://umijs.org/config/
  2. import os from 'os';
  3. import pageRoutes from './router.config';
  4. import defaultSettings from '../src/defaultSettings';
  6. const { pwa, primaryColor } = defaultSettings;
  7. const { APP_TYPE, TEST } = process.env;
  9. const plugins = [
  10.   [
  11.     'umi-plugin-react',
  12.     {
  13.       antd: true,
  14.       dva: {
  15.         hmr: true,
  16.       },
  17.       locale: {
  18.         enable: true, // default false
  19.         default: 'zh-CN', // default zh-CN
  20.         baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
  21.       },
  22.       dynamicImport: {
  23.         loadingComponent: './components/PageLoading/index',
  24.         webpackChunkName: true,
  25.         level: 3,
  26.       },
  27.       pwa: pwa
  28.         ? {
  29.             workboxPluginMode: 'InjectManifest',
  30.             workboxOptions: {
  31.               importWorkboxFrom: 'local',
  32.             },
  33.           }
  34.         : false,
  35.       ...(!TEST && os.platform() === 'darwin'
  36.         ? {
  37.             dll: {
  38.               include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'],
  39.               exclude: ['@babel/runtime', 'netlify-lambda'],
  40.             },
  41.             hardSource: false,
  42.           }
  43.         : {}),
  44.     },
  45.   ],
  46. ];
  48. // 针对 preview.pro.ant.design 的 GA 统计代码
  49. // 业务上不需要这个
  50. if (APP_TYPE === 'site') {
  51.   plugins.push([
  52.     'umi-plugin-ga',
  53.     {
  54.       code: 'UA-72788897-6',
  55.     },
  56.   ]);
  57. }
  59. export default {
  60.   plugins: [
  61.     [
  62.       'umi-plugin-react',
  63.       {
  64.         antd: true,
  65.         dva: {
  66.           hmr: true,
  67.         },
  68.         targets: {
  69.           ie: 11,
  70.         },
  71.         locale: {
  72.           enable: true, // default false
  73.           default: 'zh-CN', // default zh-CN
  74.           baseNavigator: true, // default true, when it is true, will use `navigator.language` overwrite default
  75.         },
  76.         dynamicImport: {
  77.           loadingComponent: './components/PageLoading/index',
  78.         },
  79.       },
  80.     ],
  81.     [
  82.       'umi-plugin-pro-block',
  83.       {
  84.         moveMock: false,
  85.         moveService: false,
  86.         modifyRequest: true,
  87.         autoAddMenu: true,
  88.       },
  89.     ],
  90.   ],  /**
  91.    * webpack 相关配置
  92.    */
  93.   define: {
  94.     APP_TYPE: process.env.APP_TYPE || '',
  95.   },
  96.   treeShaking: true,
  97.   targets: {
  98.     ie: 11,
  99.   },
  100.   // Theme for antd
  101.   // https://ant.design/docs/react/customize-theme-cn
  102.   //路由相关配置
  103.   routes: pageRoutes,
  104.   disableRedirectHoist: true,
  106.   theme: {
  107.     'primary-color': primaryColor,
  108.   },
  109.   externals: {
  110.     '@antv/data-set': 'DataSet',
  111.   },
  112.   ignoreMomentLocale: true,
  113.   lessLoaderOptions: {
  114.     javascriptEnabled: true,
  115.   },
  116. };

pages/umi/routes

  1. import React from 'react';
  2. import { Router as DefaultRouter, Route, Switch } from 'react-router-dom';
  3. import dynamic from 'umi/dynamic';
  4. import renderRoutes from 'umi/lib/renderRoutes';
  5. import history from '@tmp/history';
  6. import RendererWrapper0 from '/Users/a1/github/prointeraction/pop3/src/pages/.umi/LocaleWrapper.jsx';
  7. import _dvaDynamic from 'dva/dynamic';
  9. let Router = require('dva/router').routerRedux.ConnectedRouter;
  11. let routes = [
  12.   {
  13.     path: '/user',
  14.     component: __IS_BROWSER
  15.       ? _dvaDynamic({
  16.           component: () => import('../../layouts/UserLayout'),
  17.           LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  18.             .default,
  19.         })
  20.       : require('../../layouts/UserLayout').default,
  21.     routes: [
  22.       {
  23.         path: '/user',
  24.         redirect: '/user/login',
  25.         exact: true,
  26.       },
  27.       {
  28.         path: '/user/login',
  29.         name: 'login',
  30.         component: __IS_BROWSER
  31.           ? _dvaDynamic({
  32.               component: () => import('../User/Login'),
  33.               LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  34.                 .default,
  35.             })
  36.           : require('../User/Login').default,
  37.         exact: true,
  38.       },
  39.       {
  40.         path: '/user/register',
  41.         name: 'register',
  42.         component: __IS_BROWSER
  43.           ? _dvaDynamic({
  44.               component: () => import('../User/Register'),
  45.               LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  46.                 .default,
  47.             })
  48.           : require('../User/Register').default,
  49.         exact: true,
  50.       },
  51.       {
  52.         path: '/user/register-result',
  53.         name: 'register.result',
  54.         component: __IS_BROWSER
  55.           ? _dvaDynamic({
  56.               component: () => import('../User/RegisterResult'),
  57.               LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  58.                 .default,
  59.             })
  60.           : require('../User/RegisterResult').default,
  61.         exact: true,
  62.       },
  63.       {
  64.         component: __IS_BROWSER
  65.           ? _dvaDynamic({
  66.               component: () => import('../404'),
  67.               LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  68.                 .default,
  69.             })
  70.           : require('../404').default,
  71.         exact: true,
  72.       },
  73.       {
  74.         component: () =>
  75.           React.createElement(
  76.             require('/Users/a1/github/prointeraction/pop3/node_modules/umi-build-dev/lib/plugins/404/NotFound.js')
  77.               .default,
  78.             { pagesPath: 'src/pages', hasRoutesInConfig: true },
  79.           ),
  80.       },
  81.     ],
  82.   },
  83.   {
  84.     path: '/',
  85.     component: __IS_BROWSER
  86.       ? _dvaDynamic({
  87.           component: () => import('../../layouts/BasicLayout'),
  88.           LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  89.             .default,
  90.         })
  91.       : require('../../layouts/BasicLayout').default,
  92.     Routes: [require('../Authorized').default],
  93.     routes: [
  94.       {
  95.         path: '/',
  96.         redirect: '/dashboard/analysis',
  97.         authority: ['admin', 'user'],
  98.         exact: true,
  99.       },
  100.       {
  101.         path: '/dashboard',
  102.         name: 'dashboard',
  103.         icon: 'dashboard',
  104.         routes: [
  105.           {
  106.             path: '/dashboard/analysis',
  107.             name: 'analysis',
  108.             component: __IS_BROWSER
  109.               ? _dvaDynamic({
  110.                   component: () => import('../Dashboard/Analysis'),
  111.                   LoadingComponent: require('/Users/a1/github/prointeraction/pop3/src/components/PageLoading/index')
  112.                     .default,
  113.                 })
  114.               : require('../Dashboard/Analysis').default,
  115.             exact: true,
  116.           },
  117.           {
  118.             component: () =>
  119.               React.createElement(
  120.                 require('/Users/a1/github/prointeraction/pop3/node_modules/umi-build-dev/lib/plugins/404/NotFound.js')
  121.                   .default,
  122.                 { pagesPath: 'src/pages', hasRoutesInConfig: true },
  123.               ),
  124.           },
  125.         ],
  126.       },
  127.       {
  128.         component: () =>
  129.           React.createElement(
  130.             require('/Users/a1/github/prointeraction/pop3/node_modules/umi-build-dev/lib/plugins/404/NotFound.js')
  131.               .default,
  132.             { pagesPath: 'src/pages', hasRoutesInConfig: true },
  133.           ),
  134.       },
  135.     ],
  136.   },
  137.   {
  138.     component: () =>
  139.       React.createElement(
  140.         require('/Users/a1/github/prointeraction/pop3/node_modules/umi-build-dev/lib/plugins/404/NotFound.js')
  141.           .default,
  142.         { pagesPath: 'src/pages', hasRoutesInConfig: true },
  143.       ),
  144.   },
  145. ];
  146. window.g_routes = routes;
  147. const plugins = require('umi/_runtimePlugin');
  148. plugins.applyForEach('patchRoutes', { initialValue: routes });
  150. export { routes };
  152. export default class RouterWrapper extends React.Component {
  153.   unListen = () => {};
  155.   constructor(props) {
  156.     super(props);
  158.     // route change handler
  159.     function routeChangeHandler(location, action) {
  160.       plugins.applyForEach('onRouteChange', {
  161.         initialValue: {
  162.           routes,
  163.           location,
  164.           action,
  165.         },
  166.       });
  167.     }
  168.     this.unListen = history.listen(routeChangeHandler);
  169.     routeChangeHandler(history.location);
  170.   }
  172.   componentWillUnmount() {
  173.     this.unListen();
  174.   }
  176.   render() {
  177.     const props = this.props || {};
  178.     return (
  179.       <RendererWrapper0>
  180.         <Router history={history}>{renderRoutes(routes, props)}</Router>
  181.       </RendererWrapper0>
  182.     );
  183.   }
  184. }