From 8220e5cd215dadf87e3136470f76affac197cf9e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Sun, 9 Feb 2020 11:47:14 +0800 Subject: [PATCH] feat: add environment variable REACT_APP_ENV (#5946) * feat: add environment variable REACT_APP_ENV * feat: add alias for start:dev * bugfix: fix insert code error --- .eslintrc.js | 1 + config/config.ts | 19 ++++--------- config/proxy.ts | 30 ++++++++++++++++++++ package.json | 14 +++++---- src/components/GlobalHeader/RightContent.tsx | 9 +++++- src/locales/en-US/menu.ts | 4 +-- src/locales/pt-BR/menu.ts | 4 +-- src/typings.d.ts | 2 ++ 8 files changed, 60 insertions(+), 23 deletions(-) create mode 100644 config/proxy.ts diff --git a/.eslintrc.js b/.eslintrc.js index 7ca3d282..b882c20e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -3,5 +3,6 @@ module.exports = { globals: { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true, page: true, + REACT_APP_ENV: true, }, }; diff --git a/config/config.ts b/config/config.ts index d4209c29..a9a6825b 100644 --- a/config/config.ts +++ b/config/config.ts @@ -2,12 +2,13 @@ import { IConfig, IPlugin } from 'umi-types'; import defaultSettings from './defaultSettings'; // https://umijs.org/config/ import slash from 'slash2'; import themePluginConfig from './themePluginConfig'; +import proxy from './proxy'; 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 } = process.env; +const { ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION, REACT_APP_ENV } = process.env; const isAntDesignProPreview = ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION === 'site'; const plugins: IPlugin[] = [ @@ -39,7 +40,8 @@ const plugins: IPlugin[] = [ importWorkboxFrom: 'local', }, } - : false, // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665 + : false, + // default close dll, because issue https://github.com/ant-design/ant-design-pro/issues/4665 // dll features https://webpack.js.org/plugins/dll-plugin/ // dll: { // include: ['dva', 'dva/router', 'dva/saga', 'dva/fetch'], @@ -143,6 +145,7 @@ export default { // ...darkTheme, }, define: { + REACT_APP_ENV: REACT_APP_ENV || false, 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 专用环境变量，请不要在你的项目中使用它。 }, @@ -167,9 +170,7 @@ export default { ) { return localName; } - const match = context.resourcePath.match(/src(.*)/); - if (match && match[1]) { const antdProPath = match[1].replace('.less', ''); const arr = slash(antdProPath) @@ -178,19 +179,11 @@ export default { .map((a: string) => a.toLowerCase()); return `antd-pro${arr.join('-')}-${localName}`.replace(/--/g, '-'); } - return localName; }, }, manifest: { basePath: '/', }, - // chainWebpack: webpackPlugin, - // proxy: { - // '/server/api/': { - // target: 'https://preview.pro.ant.design/', - // changeOrigin: true, - // pathRewrite: { '^/server': '' }, - // }, - // }, + proxy: proxy[REACT_APP_ENV || 'dev'], } as IConfig; diff --git a/config/proxy.ts b/config/proxy.ts new file mode 100644 index 00000000..3fa70dde --- /dev/null +++ b/config/proxy.ts @@ -0,0 +1,30 @@ +/** + * 在生产环境 代理是无法生效的，所以这里没有生产环境的配置 + * The agent cannot take effect in the production environment + * so there is no configuration of the production environment + * For details, please see + * https://pro.ant.design/docs/deploy + */ +export default { + dev: { + '/api/': { + target: 'https://preview.pro.ant.design', + changeOrigin: true, + pathRewrite: { '^': '' }, + }, + }, + test: { + '/api/': { + target: 'https://preview.pro.ant.design', + changeOrigin: true, + pathRewrite: { '^': '' }, + }, + }, + pre: { + '/api/': { + target: 'your pre url', + changeOrigin: true, + pathRewrite: { '^': '' }, + }, + }, +}; diff --git a/package.json b/package.json index db61d298..797ed276 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "docker:push": "npm run docker-hub:build && npm run docker:tag && docker push antdesign/ant-design-pro", "docker:tag": "docker tag ant-design-pro antdesign/ant-design-pro", "fetch:blocks": "pro fetch-blocks && npm run prettier", - "format-imports": "cross-env import-sort --write '**/*.{js,jsx,ts,tsx}'", + "format-imports": "import-sort --write '**/*.{js,jsx,ts,tsx}'", "functions:build": "netlify-lambda build ./lambda", "functions:run": "cross-env NODE_ENV=dev netlify-lambda serve ./lambda", "gh-pages": "cp CNAME ./dist/ && gh-pages -d dist", @@ -30,12 +30,16 @@ "prettier": "prettier -c --write \"**/*\"", "site": "npm run fetch:blocks && npm run build && npm run functions:build", "start": "umi dev", + "dev": "npm run start:dev", + "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none umi dev", "start:no-mock": "cross-env MOCK=none umi dev", "start:no-ui": "cross-env UMI_UI=none umi dev", + "start:pre": "cross-env REACT_APP_ENV=pre MOCK=none umi dev", + "start:test": "cross-env REACT_APP_ENV=test MOCK=none umi dev", "test": "umi test", - "tsc": "tsc", "test:all": "node ./tests/run-tests.js", "test:component": "umi test ./src/components", + "tsc": "tsc", "ui": "umi ui" }, "husky": { @@ -45,10 +49,10 @@ }, "lint-staged": { "**/*.less": "stylelint --syntax less", + "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js", "**/*.{js,jsx,tsx,ts,less,md,json}": [ "prettier --write" - ], - "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js" + ] }, "browserslist": [ "> 1%", @@ -78,7 +82,7 @@ "umi-request": "^1.0.8" }, "devDependencies": { - "@ant-design/pro-cli": "^1.0.14", + "@ant-design/pro-cli": "^1.0.18", "@types/classnames": "^2.2.7", "@types/express": "^4.17.0", "@types/history": "^4.7.2", diff --git a/src/components/GlobalHeader/RightContent.tsx b/src/components/GlobalHeader/RightContent.tsx index 333d1b54..7da29bd2 100644 --- a/src/components/GlobalHeader/RightContent.tsx +++ b/src/components/GlobalHeader/RightContent.tsx @@ -1,4 +1,4 @@ -import { Icon, Tooltip } from 'antd'; +import { Icon, Tooltip, Tag } from 'antd'; import React from 'react'; import { connect } from 'dva'; import { formatMessage } from 'umi-plugin-react/locale'; @@ -15,6 +15,12 @@ export interface GlobalHeaderRightProps extends ConnectProps { layout: 'sidemenu' | 'topmenu'; } +const ENVTagColor = { + dev: 'orange', + test: 'green', + pre: '#87d068', +}; + const GlobalHeaderRight: React.SFC = props => { const { theme, layout } = props; let className = styles.right; @@ -64,6 +70,7 @@ const GlobalHeaderRight: React.SFC = props => { + {REACT_APP_ENV && {REACT_APP_ENV}} ); diff --git a/src/locales/en-US/menu.ts b/src/locales/en-US/menu.ts index bb698613..a737e697 100644 --- a/src/locales/en-US/menu.ts +++ b/src/locales/en-US/menu.ts @@ -2,8 +2,8 @@ export default { 'menu.welcome': 'Welcome', 'menu.more-blocks': 'More Blocks', 'menu.home': 'Home', - 'menu.admin': 'admin', - 'menu.admin.sub-page': 'sub-page', + 'menu.admin': 'Admin', + 'menu.admin.sub-page': 'Sub-Page', 'menu.login': 'Login', 'menu.register': 'Register', 'menu.register.result': 'Register Result', diff --git a/src/locales/pt-BR/menu.ts b/src/locales/pt-BR/menu.ts index 931a2794..b87ebbba 100644 --- a/src/locales/pt-BR/menu.ts +++ b/src/locales/pt-BR/menu.ts @@ -3,8 +3,8 @@ export default { 'menu.more-blocks': 'More Blocks', 'menu.home': 'Início', 'menu.login': 'Login', - 'menu.admin': 'admin', - 'menu.admin.sub-page': 'sub-page', + 'menu.admin': 'Admin', + 'menu.admin.sub-page': 'Sub-Page', 'menu.register': 'Registro', 'menu.register.result': 'Resultado de registro', 'menu.dashboard': 'Dashboard', diff --git a/src/typings.d.ts b/src/typings.d.ts index ddc5a8d3..eb1d9553 100644 --- a/src/typings.d.ts +++ b/src/typings.d.ts @@ -34,3 +34,5 @@ declare let ga: Function; // preview.pro.ant.design only do not use in your production ; // preview.pro.ant.design 专用环境变量，请不要在你的项目中使用它。 declare let ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: 'site' | undefined; + +declare const REACT_APP_ENV: 'test' | 'dev' | 'pre' | false;