From 7ddc4eecfc3df562a94089b05a57478366fa800b Mon Sep 17 00:00:00 2001
From: Dreamacro <305009791@qq.com>
Date: Fri, 18 Sep 2020 21:53:13 +0800
Subject: [PATCH] Chore: use create react app bundle script
---
.babelrc | 16 +-
.eslintrc.yml | 30 +-
.stylelintrc | 16 -
config/env.js | 101 +
config/getHttpsConfig.js | 66 +
config/modules.js | 141 +
config/paths.js | 72 +
config/pnpTs.js | 35 +
config/webpack.config.js | 671 ++
config/webpackDevServer.config.js | 130 +
configs/webpack/common.js | 81 -
configs/webpack/dev.js | 44 -
configs/webpack/prod.js | 48 -
package-lock.json | 8795 ++++++++---------
package.json | 100 +-
public/index.html | 19 +
scripts/build.js | 211 +
scripts/start.js | 165 +
src/components/Alert/index.tsx | 2 +-
src/components/Message/index.tsx | 2 +-
src/components/Modal/index.tsx | 5 +-
src/components/Select/index.tsx | 1 -
src/containers/App.tsx | 5 +-
src/containers/Connections/index.tsx | 12 +-
src/containers/Connections/store.ts | 3 -
.../ExternalControllerDrawer/index.tsx | 4 +-
src/containers/Logs/index.tsx | 2 +-
.../Proxies/components/Group/index.tsx | 2 +-
.../Proxies/components/Proxy/index.tsx | 15 +-
src/containers/Settings/index.tsx | 2 +-
src/containers/Sidebar/index.tsx | 2 +-
src/global.d.ts | 65 +-
src/i18n/index.ts | 1 -
src/index.html.ejs | 12 -
src/index.ts | 19 +-
src/lib/helper.ts | 3 +-
src/lib/hook.ts | 53 +-
src/lib/jsBridge.ts | 10 +-
src/lib/recoil.ts | 54 +-
src/lib/request.ts | 5 +-
src/lib/streamer.ts | 5 +-
src/models/Rule.ts | 20 +-
src/render.tsx | 2 +-
src/stores/recoil.ts | 6 +-
tsconfig.json | 28 +-
45 files changed, 5765 insertions(+), 5316 deletions(-)
delete mode 100644 .stylelintrc
create mode 100644 config/env.js
create mode 100644 config/getHttpsConfig.js
create mode 100644 config/modules.js
create mode 100644 config/paths.js
create mode 100644 config/pnpTs.js
create mode 100644 config/webpack.config.js
create mode 100644 config/webpackDevServer.config.js
delete mode 100644 configs/webpack/common.js
delete mode 100644 configs/webpack/dev.js
delete mode 100644 configs/webpack/prod.js
create mode 100644 public/index.html
create mode 100644 scripts/build.js
create mode 100644 scripts/start.js
delete mode 100644 src/index.html.ejs
diff --git a/.babelrc b/.babelrc
index b2e6ac8..0f41517 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,17 +1,5 @@
{
"presets": [
- ["@babel/preset-env", {"modules": false}],
- "@babel/preset-react"
- ],
- "plugins": [
- "react-hot-loader/babel"
- ],
- "env": {
- "production": {
- "presets": ["minify"]
- },
- "test": {
- "presets": ["@babel/preset-env", "@babel/preset-react"]
- }
- }
+ "react-app"
+ ]
}
diff --git a/.eslintrc.yml b/.eslintrc.yml
index 52ad0bb..822bb79 100644
--- a/.eslintrc.yml
+++ b/.eslintrc.yml
@@ -1,31 +1,3 @@
-env:
- browser: true
- es6: true
extends:
- - 'plugin:react/recommended'
- - 'plugin:@typescript-eslint/recommended'
- - standard
-globals:
- Atomics: readonly
- SharedArrayBuffer: readonly
+ - react-app
parser: '@typescript-eslint/parser'
-parserOptions:
- ecmaFeatures:
- jsx: true
- ecmaVersion: 2018
- sourceType: module
- project: './tsconfig.json'
-plugins:
- - react
- - '@typescript-eslint'
-settings:
- react:
- version: 'detect'
-rules:
- 'react/prop-types': 0
- '@typescript-eslint/indent': ['error', 4, { 'SwitchCase': 0 }]
- 'indent': 'off'
- '@typescript-eslint/explicit-module-boundary-types': 'off'
- '@typescript-eslint/explicit-function-return-type': 'off'
- '@typescript-eslint/member-delimiter-style': ['warn', { multiline: { delimiter: 'none' }, singleline: { delimiter: 'comma' } }]
- '@typescript-eslint/no-explicit-any': 'off'
diff --git a/.stylelintrc b/.stylelintrc
deleted file mode 100644
index a7b2a9f..0000000
--- a/.stylelintrc
+++ /dev/null
@@ -1,16 +0,0 @@
-{
- "extends": "stylelint-config-standard",
- "rules": {
- "indentation": 4,
- "font-family-no-missing-generic-family-keyword": null,
- "at-rule-no-unknown": [true, {
- "ignoreAtRules": ["for", "function", "if", "each", "include", "mixin"]
- }]
- },
- "ignoreFiles": [
- "**/*.ts",
- "**/*.tsx",
- "**/*.js",
- "**/*.jsx"
- ]
-}
diff --git a/config/env.js b/config/env.js
new file mode 100644
index 0000000..09ec03c
--- /dev/null
+++ b/config/env.js
@@ -0,0 +1,101 @@
+'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`,
+ `${paths.dotenv}.${NODE_ENV}`,
+ // 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,
+].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,
.
+ // 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,
+ }
+ );
+ // 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;
diff --git a/config/getHttpsConfig.js b/config/getHttpsConfig.js
new file mode 100644
index 0000000..013d493
--- /dev/null
+++ b/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;
diff --git a/config/modules.js b/config/modules.js
new file mode 100644
index 0000000..c8efd0d
--- /dev/null
+++ b/config/modules.js
@@ -0,0 +1,141 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+const resolve = require('resolve');
+
+/**
+ * Get additional module paths based on the baseUrl of a compilerOptions object.
+ *
+ * @param {Object} options
+ */
+function getAdditionalModulePaths(options = {}) {
+ const baseUrl = options.baseUrl;
+
+ // We need to explicitly check for null and undefined (and not a falsy value) because
+ // TypeScript treats an empty string as `.`.
+ if (baseUrl == null) {
+ // If there's no baseUrl set we respect NODE_PATH
+ // Note that NODE_PATH is deprecated and will be removed
+ // in the next major release of create-react-app.
+
+ const nodePath = process.env.NODE_PATH || '';
+ return nodePath.split(path.delimiter).filter(Boolean);
+ }
+
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+ // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
+ // the default behavior.
+ if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
+ return null;
+ }
+
+ // Allow the user set the `baseUrl` to `appSrc`.
+ if (path.relative(paths.appSrc, baseUrlResolved) === '') {
+ return [paths.appSrc];
+ }
+
+ // If the path is equal to the root directory we ignore it here.
+ // We don't want to allow importing from the root directly as source files are
+ // not transpiled outside of `src`. We do allow importing them with the
+ // absolute path (e.g. `src/Components/Button.js`) but we set that up with
+ // an alias.
+ if (path.relative(paths.appPath, baseUrlResolved) === '') {
+ return null;
+ }
+
+ // Otherwise, throw an error.
+ throw new Error(
+ chalk.red.bold(
+ "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
+ ' Create React App does not support other values at this time.'
+ )
+ );
+}
+
+/**
+ * Get webpack aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getWebpackAliases(options = {}) {
+ const baseUrl = options.baseUrl;
+
+ if (!baseUrl) {
+ return {};
+ }
+
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+ if (path.relative(paths.appPath, baseUrlResolved) === '') {
+ return {
+ src: paths.appSrc,
+ };
+ }
+}
+
+/**
+ * Get jest aliases based on the baseUrl of a compilerOptions object.
+ *
+ * @param {*} options
+ */
+function getJestAliases(options = {}) {
+ const baseUrl = options.baseUrl;
+
+ if (!baseUrl) {
+ return {};
+ }
+
+ const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
+
+ if (path.relative(paths.appPath, baseUrlResolved) === '') {
+ return {
+ '^src/(.*)$': '/src/$1',
+ };
+ }
+}
+
+function getModules() {
+ // Check if TypeScript is setup
+ const hasTsConfig = fs.existsSync(paths.appTsConfig);
+ const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+ if (hasTsConfig && hasJsConfig) {
+ throw new Error(
+ 'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
+ );
+ }
+
+ let config;
+
+ // If there's a tsconfig.json we assume it's a
+ // TypeScript project and set up the config
+ // based on tsconfig.json
+ if (hasTsConfig) {
+ const ts = require(resolve.sync('typescript', {
+ basedir: paths.appNodeModules,
+ }));
+ config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
+ // Otherwise we'll check if there is jsconfig.json
+ // for non TS projects.
+ } else if (hasJsConfig) {
+ config = require(paths.appJsConfig);
+ }
+
+ config = config || {};
+ const options = config.compilerOptions || {};
+
+ const additionalModulePaths = getAdditionalModulePaths(options);
+
+ return {
+ additionalModulePaths: additionalModulePaths,
+ webpackAliases: getWebpackAliases(options),
+ jestAliases: getJestAliases(options),
+ hasTsConfig,
+ };
+}
+
+module.exports = getModules();
diff --git a/config/paths.js b/config/paths.js
new file mode 100644
index 0000000..4a33798
--- /dev/null
+++ b/config/paths.js
@@ -0,0 +1,72 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+const getPublicUrlOrPath = require('react-dev-utils/getPublicUrlOrPath');
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebook/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
+
+// We use `PUBLIC_URL` environment variable or "homepage" field to infer
+// "public path" at which the app is served.
+// webpack needs to know it to put the right