sync code

.eslintrc.js

@@ -36,7 +36,13 @@ module.exports = {
   },
   settings: {
     // support import modules from TypeScript files in JavaScript files
-    'import/resolver': { node: { extensions: ['.js', '.ts', '.tsx'] } },
+    'import/resolver': {
+      node: { extensions: ['.js', '.ts', '.tsx'] },
+      alias: {
+        map: [['@', './src'], ['utils', './src/utils']],
+        extensions: ['.ts', '.js', '.jsx', '.json'],
+      },
+    },
     polyfills: ['fetch', 'promises', 'url', 'object-assign'],
   },
 };

config/config.dev.ts

+export default {
+  define: {
+    'process.env.APP_NAME': 'kim dev',
+    'process.env.name': 'name dev',
+  },
+  // proxy: {
+  //   '/server/api/': {
+  //     target: 'https://preview.pro.ant.design/',
+  //     changeOrigin: true,
+  //     pathRewrite: { '^/server': '' },
+  //   },
+  // },
+};

config/config.local.ts

+export default {
+  define: {
+    'process.env.APP_NAME': 'kim local',
+  },
+  // proxy: {
+  //   '/server/api/': {
+  //     target: 'https://preview.pro.ant.design/',
+  //     changeOrigin: true,
+  //     pathRewrite: { '^/server': '' },
+  //   },
+  // },
+};

config/config.prod.ts

+export default {
+  define: {
+    'process.env.APP_NAME': 'kim dev',
+    'process.env.name': 'name dev',
+  },
+};

config/config.test.ts

+export default {
+  define: {
+    'process.env.APP_NAME': 'kim dev',
+    'process.env.name': 'name dev',
+  },
+};

config/config.ts

@@ -4,12 +4,17 @@ import slash from 'slash2';
 import { IPlugin, IConfig } from 'umi-types';
 import defaultSettings from './defaultSettings';
 import webpackPlugin from './plugin.config'; // webpack相关配置
-const { pwa, primaryColor } = defaultSettings;
+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',
@@ -88,50 +93,37 @@ 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,
   },
-  devtool: ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION ? 'source-map' : false,
+  // 打包后源码 umi已经根据不同环境有默认的源码生成规则
+  devtool: false,
   // 路由配置
-  routes: [
-    {
-      path: '/',
-      component: '../layouts/BasicLayout',
-      Routes: ['src/pages/Authorized'],
-      authority: ['admin', 'user'],
-      routes: [
-        {
-          path: '/',
-          name: 'welcome',
-          icon: 'smile',
-          component: './Welcome',
-        },
-      ],
-    },
-  ],
+  routes,
   // Theme for antd
   // https://ant.design/docs/react/customize-theme-cn
-  theme: {
-    'primary-color': primaryColor,
-  },
-  // proxy: {
-  //   '/server/api/': {
-  //     target: 'https://preview.pro.ant.design/',
-  //     changeOrigin: true,
-  //     pathRewrite: { '^/server': '' },
-  //   },
-  // },
+  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;
@@ -161,9 +153,22 @@ export default {
       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;

config/defaultSettings.ts

@@ -42,6 +42,9 @@ export interface DefaultSettings {
   colorWeak: boolean;
 }
 
+/**
+ * 默认配置
+ */
 export default {
   navTheme: 'dark',
   primaryColor: '#1890FF',

config/routes.config.ts

+/**
+ * 路由相关配置
+ */
+export default [
+  {
+    path: '/',
+    component: '../layouts/BasicLayout',
+    Routes: ['src/pages/Authorized'],
+    authority: ['admin', 'user'],
+    routes: [
+      {
+        path: '/',
+        name: 'welcome',
+        icon: 'smile',
+        component: './Welcome',
+      },
+      {
+        path: '/demo',
+        name: 'demo',
+        icon: 'smile',
+        component: './demo',
+      },
+    ],
+  },
+];

config/theme.config.ts

+import defaultSettings from './defaultSettings';
+const { primaryColor } = defaultSettings;
+export default {
+  'primary-color': primaryColor,
+};

package.json

@@ -28,7 +28,7 @@
     "lint:ts": "tslint -p . -c tslint.yml",
     "prettier": " check-prettier write",
     "site": "npm run fetch:blocks && npm run functions:build && umi build",
-    "start": "umi dev",
+    "start": "cross-env UMI_ENV=dev umi dev",
     "start:no-mock": "cross-env MOCK=none umi dev",
     "test": "umi test",
     "test:all": "node ./tests/run-tests.js",
@@ -108,6 +108,7 @@
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-react": "^7.12.4",
+    "eslint-import-resolver-alias":"^1.1.2",
     "express": "^4.16.4",
     "gh-pages": "^2.0.1",
     "husky": "^2.2.0",

src/config.js

 /**
  * app相关配置
  */
-export default {};
+console.log(process.env.name);
+console.log(process.env.APP_NAME);
+
+export default {
+  appName: process.env.APP_NAME,
+};

src/pages/Welcome.tsx

 import React from 'react';
-
+import config from '@/config';
 export default () => (
   <p style={{ textAlign: 'center' }}>
+    {JSON.stringify(config)}
     想要添加更多页面？请参考{' '}
     <a href="https://umijs.org/guide/block.html" target="_blank" rel="noopener noreferrer">
       umi 区块

src/pages/demo/index.js

+import React from 'react';
+import { getVersion } from 'utils';
+import styles from './index.less';
+
+export default () => {
+  return <div className={styles.root}>hello world {getVersion()}</div>;
+};

src/pages/demo/index.less

+.root {
+  height: 400px;
+  width: 400px;
+  background-color: aquamarine;
+}

src/utils/index.ts

+export const getVersion = () => {
+  console.log('0.0.1');
+  return '0.0.1';
+};