diff --git a/.eslintrc.js b/.eslintrc.js index 7372d96bce7291a91dbecf4a1c7ce9f14b1f862c..1cf39d83733a3ba7c3e3ba4502100b1a85dcbae8 100644 --- a/.eslintrc.js +++ b/.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'], }, }; diff --git a/config/config.dev.js b/config/config.dev.js deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/config/config.dev.ts b/config/config.dev.ts new file mode 100644 index 0000000000000000000000000000000000000000..d6de4ef9d6fc84427449473e8b13ef38f7a67bf8 --- /dev/null +++ b/config/config.dev.ts @@ -0,0 +1,13 @@ +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': '' }, + // }, + // }, +}; diff --git a/config/config.local.ts b/config/config.local.ts new file mode 100644 index 0000000000000000000000000000000000000000..39b3924e78003ae0a4fd56e77879694b05e13cb1 --- /dev/null +++ b/config/config.local.ts @@ -0,0 +1,12 @@ +export default { + define: { + 'process.env.APP_NAME': 'kim local', + }, + // proxy: { + // '/server/api/': { + // target: 'https://preview.pro.ant.design/', + // changeOrigin: true, + // pathRewrite: { '^/server': '' }, + // }, + // }, +}; diff --git a/config/config.prod.js b/config/config.prod.js deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/config/config.prod.ts b/config/config.prod.ts new file mode 100644 index 0000000000000000000000000000000000000000..2234a6e703e6948b34c440bd1ac6c3111ba943a5 --- /dev/null +++ b/config/config.prod.ts @@ -0,0 +1,6 @@ +export default { + define: { + 'process.env.APP_NAME': 'kim dev', + 'process.env.name': 'name dev', + }, +}; diff --git a/config/config.test.js b/config/config.test.js deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/config/config.test.ts b/config/config.test.ts new file mode 100644 index 0000000000000000000000000000000000000000..2234a6e703e6948b34c440bd1ac6c3111ba943a5 --- /dev/null +++ b/config/config.test.ts @@ -0,0 +1,6 @@ +export default { + define: { + 'process.env.APP_NAME': 'kim dev', + 'process.env.name': 'name dev', + }, +}; diff --git a/config/config.ts b/config/config.ts index 008d616f6b97085914db09143ad528d8a5e83bf3..5123998f3807dac05c4ed4bcdb20767da5c40bf4 100644 --- a/config/config.ts +++ b/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; diff --git a/config/defaultSettings.ts b/config/defaultSettings.ts index 4b2c53c6cc1aae1625d3457e3df95e65bccba10a..4193e64ce2ec4006678d8ebeed410b9a30819bad 100644 --- a/config/defaultSettings.ts +++ b/config/defaultSettings.ts @@ -42,6 +42,9 @@ export interface DefaultSettings { colorWeak: boolean; } +/** + * 默认配置 + */ export default { navTheme: 'dark', primaryColor: '#1890FF', diff --git a/config/routes.config.ts b/config/routes.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..6926f324045f878fc3337ee1a099d83bf958ae54 --- /dev/null +++ b/config/routes.config.ts @@ -0,0 +1,25 @@ +/** + * 路由相关配置 + */ +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', + }, + ], + }, +]; diff --git a/config/theme.config.ts b/config/theme.config.ts new file mode 100644 index 0000000000000000000000000000000000000000..4b5a8d149fd81fe1a9fc764c227588df025b3a7d --- /dev/null +++ b/config/theme.config.ts @@ -0,0 +1,5 @@ +import defaultSettings from './defaultSettings'; +const { primaryColor } = defaultSettings; +export default { + 'primary-color': primaryColor, +}; diff --git a/package.json b/package.json index 07629e1d302924141713a94d5510729294c5f0b9..445971173931c618c769ae67eb7e2b8594ef8c62 100644 --- a/package.json +++ b/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", diff --git a/src/config.js b/src/config.js index 17fd6b40d66b08e699b3c254fcc55a185b9ac8c9..a8e43836ea436ffcb75b159d2e133ef3019d441f 100644 --- a/src/config.js +++ b/src/config.js @@ -1,4 +1,9 @@ /** * app相关配置 */ -export default {}; +console.log(process.env.name); +console.log(process.env.APP_NAME); + +export default { + appName: process.env.APP_NAME, +}; diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx index 1f78bed0fda63b325a19ff1d092e034e24970532..be7e2957cbc4f6f6398b2171f5872cbe02105d23 100644 --- a/src/pages/Welcome.tsx +++ b/src/pages/Welcome.tsx @@ -1,7 +1,8 @@ import React from 'react'; - +import config from '@/config'; export default () => (

+ {JSON.stringify(config)} 想要添加更多页面？请参考{' '} umi 区块 diff --git a/src/pages/demo/index.js b/src/pages/demo/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d6190b2dbed88b989913675b309e405c3ac1c81a --- /dev/null +++ b/src/pages/demo/index.js @@ -0,0 +1,7 @@ +import React from 'react'; +import { getVersion } from 'utils'; +import styles from './index.less'; + +export default () => { + return

hello world {getVersion()}
; +}; diff --git a/src/pages/demo/index.less b/src/pages/demo/index.less new file mode 100644 index 0000000000000000000000000000000000000000..544b031c163f99f186843ff75aa9c5cce8e7370c --- /dev/null +++ b/src/pages/demo/index.less @@ -0,0 +1,5 @@ +.root { + height: 400px; + width: 400px; + background-color: aquamarine; +} diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000000000000000000000000000000000000..9c33443479b822db6b34a7b35eb85d01826b2d1b --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,4 @@ +export const getVersion = () => { + console.log('0.0.1'); + return '0.0.1'; +};