init commit

Author: 邝华

.env.build

@@ -0,0 +1,2 @@
+VITE_APP_ENV='serve'
+VITE_APP_BASE_URL='http://8.135.1.141/micro-service-api'

.env.serve-dev

@@ -0,0 +1,2 @@
+VITE_APP_ENV='serve'
+VITE_APP_BASE_URL='http://8.135.1.141/micro-service-api'

.env.serve.prod

@@ -0,0 +1,3 @@
+REACT_APP_BASE_URL=https://xxxxx
+REACT_APP_BASE_URL2=https://xxxxx
+REACT_APP_ENV=prod

.eslintignore

@@ -0,0 +1,6 @@
+public
+node_modules
+.history
+.husky
+dist
+*.d.ts

.eslintrc.js

@@ -0,0 +1,97 @@
+module.exports = {
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true
+  },
+  extends: ['prettier'],
+  globals: {
+    $: true,
+    process: true,
+    __dirname: true
+  },
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaFeatures: {
+      experimentalObjectRestSpread: true,
+      jsx: true
+    },
+    sourceType: 'module',
+    ecmaVersion: 7
+  },
+  plugins: ['react'],
+  rules: {
+    quotes: [2, 'single'], //单引号
+    'no-console': 0, //不禁用console
+    'no-debugger': 2, //禁用debugger
+    'no-var': 0, //对var警告
+    semi: 0, //不强制使用分号
+
+    'no-irregular-whitespace': 0, //不规则的空白不允许
+    'no-trailing-spaces': 1, //一行结束后面有空格就发出警告
+    'eol-last': 0, //文件以单一的换行符结束
+    'no-unused-vars': 0,
+    //'no-unused-vars': [2, { vars: 'all', args: 'after-used' }], //不能有声明后未被使用的变量或参数
+    'no-underscore-dangle': 0, //标识符不能以_开头或结尾
+    'no-alert': 2, //禁止使用alert confirm prompt
+    'no-lone-blocks': 0, //禁止不必要的嵌套块
+    'no-class-assign': 2, //禁止给类赋值
+    'no-cond-assign': 2, //禁止在条件表达式中使用赋值语句
+    'no-const-assign': 2, //禁止修改const声明的变量
+    'no-delete-var': 2, //不能对var声明的变量使用delete操作符
+    'no-dupe-keys': 2, //在创建对象字面量时不允许键重复
+    'no-duplicate-case': 2, //switch中的case标签不能重复
+    'no-dupe-args': 2, //函数参数不能重复
+    'no-empty': 2, //块语句中的内容不能为空
+    'no-func-assign': 2, //禁止重复的函数声明
+    'no-invalid-this': 0, //禁止无效的this，只能用在构造器，类，对象字面量
+    'no-redeclare': 2, //禁止重复声明变量
+    'no-spaced-func': 2, //函数调用时 函数名与()之间不能有空格
+    'no-this-before-super': 0, //在调用super()之前不能使用this或super
+    'no-undef': 2, //不能有未定义的变量
+    'no-use-before-define': 2, //未定义前不能使用
+    camelcase: 0, //强制驼峰法命名
+    'jsx-quotes': [2, 'prefer-double'], //强制在JSX属性（jsx-quotes）中一致使用双引号
+    'react/display-name': 0, //防止在React组件定义中丢失displayName
+    'react/forbid-prop-types': [2, { forbid: ['any'] }], //禁止某些propTypes
+    'react/jsx-boolean-value': 2, //在JSX中强制布尔属性符号
+    'react/jsx-closing-bracket-location': 1, //在JSX中验证右括号位置
+    'react/jsx-curly-spacing': [2, { when: 'never', children: true }], //在JSX属性和表达式中加强或禁止大括号内的空格。
+    'react/jsx-indent-props': [2, 4], //验证JSX中的props缩进
+    'react/jsx-key': 2, //在数组或迭代器中验证JSX具有key属性
+    'react/jsx-max-props-per-line': [1, { maximum: 1 }], // 限制JSX中单行上的props的最大数量
+    'react/jsx-no-bind': 0, //JSX中不允许使用箭头函数和bind
+    'react/jsx-no-duplicate-props': 2, //防止在JSX中重复的props
+    'react/jsx-no-literals': 0, //防止使用未包装的JSX字符串
+    'react/jsx-no-undef': 1, //在JSX中禁止未声明的变量
+    'react/jsx-pascal-case': 0, //为用户定义的JSX组件强制使用PascalCase
+    'react/jsx-sort-props': 2, //强化props按字母排序
+    'react/jsx-uses-react': 1, //防止反应被错误地标记为未使用
+    'react/jsx-uses-vars': 2, //防止在JSX中使用的变量被错误地标记为未使用
+    'react/no-danger': 0, //防止使用危险的JSX属性
+    'react/no-did-mount-set-state': 0, //防止在componentDidMount中使用setState
+    'react/no-did-update-set-state': 1, //防止在componentDidUpdate中使用setState
+    'react/no-direct-mutation-state': 2, //防止this.state的直接变异
+    'react/no-multi-comp': 2, //防止每个文件有多个组件定义
+    'react/no-set-state': 0, //防止使用setState
+    'react/no-unknown-property': 2, //防止使用未知的DOM属性
+    'react/prefer-es6-class': 2, //为React组件强制执行ES5或ES6类
+    'react/prop-types': 0, //防止在React组件定义中丢失props验证
+    'react/react-in-jsx-scope': 2, //使用JSX时防止丢失React
+    'react/self-closing-comp': 0, //防止没有children的组件的额外结束标签
+    'react/sort-comp': 2, //强制组件方法顺序
+    'no-extra-boolean-cast': 0, //禁止不必要的bool转换
+    'react/no-array-index-key': 0, //防止在数组中遍历中使用数组key做索引
+    'react/no-deprecated': 1, //不使用弃用的方法
+    'react/jsx-equals-spacing': 2, //在JSX属性中强制或禁止等号周围的空格
+    'no-unreachable': 1, //不能有无法执行的代码
+    'comma-dangle': 2, //对象字面量项尾不能有逗号
+    'no-mixed-spaces-and-tabs': 0, //禁止混用tab和空格
+    'prefer-arrow-callback': 0, //比较喜欢箭头回调
+    'arrow-parens': 0, //箭头函数用小括号括起来
+    'arrow-spacing': 0 //=>的前/后括号
+  },
+  settings: {
+    'import/ignore': ['node_modules']
+  }
+}

.gitignore

@@ -0,0 +1,8 @@
+.history
+.idea
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+yarn.lock

.prettierrc

@@ -0,0 +1,10 @@
+{
+    "useTabs": false,
+    "tabWidth": 4,
+    "printWidth": 120,
+    "singleQuote": true,
+    "trailingComma": "none",
+    "bracketSpacing": true,
+    "semi": false,
+    "htmlWhitespaceSensitivity": "ignore"
+}

README.md

@@ -0,0 +1,56 @@
+#### 更新日志
+```
+
+```
+### 前言
+#### 本架构使用的技术为：react17+hooks+vite2 的新一代的react框架，框架使用类似 vue-admin-template
+
+```
+框架有js和ts版本
+js版本分支：https://github.com/jzfai/react-admin-template.git
+ts版本分支：开发中
+新一代的微服务架构：https://github.com/jzfai/micro-service-plus
+```
+
+> 开发和使用感受：两个字 真香！！！！！
+
+### 效果
+
+### 线上体验地址：http://8.135.1.141/react-admin-template
+
+
+
+
+### 如何运行
+
+```javascript
+
+克隆项目
+git clone https://github.com/jzfai/react-admin-template.git
+
+进入项目目录
+cd  react-admin-template
+
+运行yarn安装依赖
+yarn
+
+运行dev命令
+yarn run dev
+
+补充：这里说下package.json里的scripts命令
+"scripts": {
+  "dev": "vite --mode serve-dev", ---- 开发时运行
+   "build": "vite build --mode build",  ---- 打包发布生产环境
+   "serve": "vite preview --mode build" ---- 这个是在你本地打包完后（yarn run build）后会生产一个dist文件夹，这个命令在你本地启动一个本地服务用于查看dist文件内容，发布生产前可以用这个先看下打包的效果
+   "preview:build": "yarn run build && vite preview " --- 构建并查看（建议更新上product前运行一次,查看是否有问题）
+},
+```
+
+#####
+
+#### 如果需要实时交流的可以加入wx群(有vue3+ts视频教程)
+
+
+ ![http://8.135.1.141/file/images/wx-groud.png](http://8.135.1.141/file/images/wx-groud1.png)
+
+大家的支持是我前进的动力    欢迎加入一起开发

config/env.js

@@ -0,0 +1,106 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+
+// Make sure that including paths.js after env.js will read .env variables.
+delete require.cache[require.resolve('./paths')];
+
+const NODE_ENV = process.env.NODE_ENV;
+if (!NODE_ENV) {
+  throw new Error(
+    'The NODE_ENV environment variable is required but was not specified.'
+  );
+}
+
+// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
+const dotenvFiles = [
+  `${paths.dotenv}.${NODE_ENV}.local`,
+  // Don't include `.env.local` for `test` environment
+  // since normally you expect tests to produce the same
+  // results for everyone
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
+  `${paths.dotenv}.${NODE_ENV}`,
+  paths.dotenv,
+].filter(Boolean);
+
+// Load environment variables from .env* files. Suppress warnings using silent
+// if this file is missing. dotenv will never modify any environment variables
+// that have already been set.  Variable expansion is supported in .env files.
+// https://github.com/motdotla/dotenv
+// https://github.com/motdotla/dotenv-expand
+dotenvFiles.forEach(dotenvFile => {
+  if (fs.existsSync(dotenvFile)) {
+    require('dotenv-expand')(
+      require('dotenv').config({
+        path: dotenvFile,
+      })
+    );
+  }
+});
+
+// We support resolving modules according to `NODE_PATH`.
+// This lets you use absolute paths in imports inside large monorepos:
+// https://github.com/facebook/create-react-app/issues/253.
+// It works similar to `NODE_PATH` in Node itself:
+// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
+// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
+// Otherwise, we risk importing Node.js core modules into an app instead of webpack shims.
+// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
+// We also resolve them to make sure all tools using them work consistently.
+const appDirectory = fs.realpathSync(process.cwd());
+process.env.NODE_PATH = (process.env.NODE_PATH || '')
+  .split(path.delimiter)
+  .filter(folder => folder && !path.isAbsolute(folder))
+  .map(folder => path.resolve(appDirectory, folder))
+  .join(path.delimiter);
+
+// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
+// injected into the application via DefinePlugin in webpack configuration.
+const REACT_APP = /^REACT_APP_/i;
+
+function getClientEnvironment(publicUrl) {
+  const raw = Object.keys(process.env)
+    .filter(key => REACT_APP.test(key))
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: process.env.NODE_ENV || 'development',
+        // Useful for resolving the correct path to static assets in `public`.
+        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
+        // This should only be used as an escape hatch. Normally you would put
+        // images into the `src` and `import` them in code to get their paths.
+        PUBLIC_URL: publicUrl,
+        // We support configuring the sockjs pathname during development.
+        // These settings let a developer run multiple simultaneous projects.
+        // They are used as the connection `hostname`, `pathname` and `port`
+        // in webpackHotDevClient. They are used as the `sockHost`, `sockPath`
+        // and `sockPort` options in webpack-dev-server.
+        WDS_SOCKET_HOST: process.env.WDS_SOCKET_HOST,
+        WDS_SOCKET_PATH: process.env.WDS_SOCKET_PATH,
+        WDS_SOCKET_PORT: process.env.WDS_SOCKET_PORT,
+        // Whether or not react-refresh is enabled.
+        // react-refresh is not 100% stable at this time,
+        // which is why it's disabled by default.
+        // It is defined here so it is available in the webpackHotDevClient.
+        FAST_REFRESH: process.env.FAST_REFRESH !== 'false',
+      }
+    );
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce((env, key) => {
+      env[key] = JSON.stringify(raw[key]);
+      return env;
+    }, {}),
+  };
+
+  return { raw, stringified };
+}
+
+module.exports = getClientEnvironment;

config/getHttpsConfig.js

@@ -0,0 +1,66 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const crypto = require('crypto');
+const chalk = require('react-dev-utils/chalk');
+const paths = require('./paths');
+
+// Ensure the certificate and key provided are valid and if not
+// throw an easy to debug error
+function validateKeyAndCerts({ cert, key, keyFile, crtFile }) {
+  let encrypted;
+  try {
+    // publicEncrypt will throw an error with an invalid cert
+    encrypted = crypto.publicEncrypt(cert, Buffer.from('test'));
+  } catch (err) {
+    throw new Error(
+      `The certificate "${chalk.yellow(crtFile)}" is invalid.\n${err.message}`
+    );
+  }
+
+  try {
+    // privateDecrypt will throw an error with an invalid key
+    crypto.privateDecrypt(key, encrypted);
+  } catch (err) {
+    throw new Error(
+      `The certificate key "${chalk.yellow(keyFile)}" is invalid.\n${
+        err.message
+      }`
+    );
+  }
+}
+
+// Read file and throw an error if it doesn't exist
+function readEnvFile(file, type) {
+  if (!fs.existsSync(file)) {
+    throw new Error(
+      `You specified ${chalk.cyan(
+        type
+      )} in your env, but the file "${chalk.yellow(file)}" can't be found.`
+    );
+  }
+  return fs.readFileSync(file);
+}
+
+// Get the https config
+// Return cert files if provided in env, otherwise just true or false
+function getHttpsConfig() {
+  const { SSL_CRT_FILE, SSL_KEY_FILE, HTTPS } = process.env;
+  const isHttps = HTTPS === 'true';
+
+  if (isHttps && SSL_CRT_FILE && SSL_KEY_FILE) {
+    const crtFile = path.resolve(paths.appPath, SSL_CRT_FILE);
+    const keyFile = path.resolve(paths.appPath, SSL_KEY_FILE);
+    const config = {
+      cert: readEnvFile(crtFile, 'SSL_CRT_FILE'),
+      key: readEnvFile(keyFile, 'SSL_KEY_FILE'),
+    };
+
+    validateKeyAndCerts({ ...config, keyFile, crtFile });
+    return config;
+  }
+  return isHttps;
+}
+
+module.exports = getHttpsConfig;