feat: second blood

.babelrc

@@ -3,8 +3,8 @@
     [
       "@babel/preset-env",
       {
-        "useBuiltIns": "entry",
         "modules": false,
+        "useBuiltIns": "usage",
         "corejs": 3,
         "targets": {
           "chrome": 60
@@ -13,5 +13,10 @@
     ],
     "@babel/preset-react"
   ],
-  "plugins": ["@babel/plugin-proposal-class-properties", "@babel/plugin-syntax-dynamic-import"]
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-json-strings",
+    "@babel/plugin-proposal-nullish-coalescing-operator"
+  ]
 }

.eslintrc

@@ -8,7 +8,8 @@
     "no-unused-vars": ["error", { "ignoreRestSiblings": true }],
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
-    "max-lines": ["warn", 400]
+    "max-lines": ["warn", { "max": 500 }],
+    "react/display-name" : 0,
   },
   "parser": "babel-eslint",
   "parserOptions": {
@@ -18,6 +19,9 @@
       "jsx": true
     }
   },
+  "globals": {
+    "UE": true
+  },
   "env": {
     "browser": true,
     "node": true,

.huskyrc

@@ -1,6 +1,6 @@
 {
   "hooks": {
     "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
   }
 }

README.md

@@ -1,3 +1,47 @@
-# react-starter
+# React Starter
 
-react webapp development scaffold for mobile and pc, with or without redux/router.
+基于[create-react-app](https://create-react-app.dev/)改造，增删改了一些特性，以达到我理解的最佳实践。
+
+## 改造了以下特性
+
+- 抽离 [ESLint](https://eslint.org/) 配置并更新到最佳实践
+- 抽离 [babel](https://babeljs.io/) 配置并更新到最佳实践
+
+## 去掉了以下特性
+
+- ~~TypeScript 支持~~
+- ~~jest 测试支持~~
+- ~~postcss 支持~~
+- ~~删掉了许多用不到的 npm 包~~
+
+## 增加了以下特性
+
+- 新增 [prettier](https://prettier.io/) 支持，并兼容 ESLint 规则
+- 新增 [husky](https://github.com/typicode/husky)+[lintstaged](https://www.npmjs.com/package/lint-staged) 支持，配合 ESLint，检查提交代码的规范性。
+- 新增 [commitlint](https://github.com/conventional-changelog/commitlint)支持 ，配合 husky，让 git commit message 更规范。
+- 新增 [gh-pages](https://www.npmjs.com/package/gh-pages)支持，一个命令行即可部署到[Github Pages](https://pages.github.com/)
+- 推荐 css-in-js：选用 [styled-components](https://www.styled-components.com/)
+- 新增路由支持：[react-router](https://reacttraining.com/)
+- 新增 favicon 支持：[在线生成各种尺寸 favorite icons](https://realfavicongenerator.net/)。生成后覆盖到`public`目录即可
+- 新增 splash 支持：[在线生成各种尺寸 splash](https://appsco.pe/developer/splash-screens)。生成后覆盖到`public/splash`目录即可
+
+## 约定
+
+- `components`/`containers`/`pages`分别对应：组件，容器和页面
+
+## 推荐安装的 VSCode 插件
+
+- ESLint
+- prettier
+- vscode-commitizen
+- markdownlint
+
+## 基于 React Starter 构建的作品
+
+- [中国色](https://colors.ichuantong.cn/)
+- [Github 仓库标星统计](https://stars.yangerxiao.com/?repo=https://github.com/zerosoul/chinese-colors)
+- [土味情话生成器](https://works.yangerxiao.com/honeyed-words-generator/)
+- [静心呼吸，在线调节](https://works.yangerxiao.com/breathe-relaxer/)
+- [超强密码生成器](https://works.yangerxiao.com/strong-password-generator/)
+
+更多：[http://works.yangerxiao.com/](http://works.yangerxiao.com/)

config/env.js

@@ -1,25 +1,23 @@
-const fs = require("fs");
-const path = require("path");
-const paths = require("./paths");
+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")];
+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."
-  );
+  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
-var dotenvFiles = [
+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`,
+  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
   paths.dotenv
 ].filter(Boolean);
 
@@ -30,8 +28,8 @@ var dotenvFiles = [
 // https://github.com/motdotla/dotenv-expand
 dotenvFiles.forEach(dotenvFile => {
   if (fs.existsSync(dotenvFile)) {
-    require("dotenv-expand")(
-      require("dotenv").config({
+    require('dotenv-expand')(
+      require('dotenv').config({
         path: dotenvFile
       })
     );
@@ -40,22 +38,22 @@ dotenvFiles.forEach(dotenvFile => {
 
 // We support resolving modules according to `NODE_PATH`.
 // This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebookincubator/create-react-app/issues/253.
+// 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/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
+// 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 || "")
+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.
+// injected into the application via DefinePlugin in webpack configuration.
 const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
@@ -69,17 +67,25 @@ function getClientEnvironment(publicUrl) {
       {
         // 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",
+        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
+        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
+  // Stringify all values so we can feed into webpack DefinePlugin
   const stringified = {
-    "process.env": Object.keys(raw).reduce((env, key) => {
+    'process.env': Object.keys(raw).reduce((env, key) => {
       env[key] = JSON.stringify(raw[key]);
       return env;
     }, {})

config/getHttpsConfig.js

@@ -0,0 +1,58 @@
+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;

config/modules.js

@@ -0,0 +1,98 @@
+const fs = require('fs');
+const path = require('path');
+const paths = require('./paths');
+const chalk = require('react-dev-utils/chalk');
+
+/**
+ * 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
+    };
+  }
+}
+
+function getModules() {
+  // Check if jsconfig.json
+  const hasJsConfig = fs.existsSync(paths.appJsConfig);
+
+  let config;
+
+  if (hasJsConfig) {
+    config = require(paths.appJsConfig);
+  }
+
+  config = config || {};
+  const options = config.compilerOptions || {};
+
+  const additionalModulePaths = getAdditionalModulePaths(options);
+
+  return {
+    additionalModulePaths: additionalModulePaths,
+    webpackAliases: getWebpackAliases(options)
+  };
+}
+
+module.exports = getModules();