diff --git a/.babelrc b/.babelrc
index 8ba8975..3fdefce 100644
--- a/.babelrc
+++ b/.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"
+ ]
}
diff --git a/.eslintrc b/.eslintrc
index b302fea..2bafa78 100644
--- a/.eslintrc
+++ b/.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,
diff --git a/.huskyrc b/.huskyrc
index 5a1b2a8..f792702 100644
--- a/.huskyrc
+++ b/.huskyrc
@@ -1,6 +1,6 @@
{
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
- "pre-commit": "lint-staged"
+ "pre-commit": "lint-staged",
}
}
diff --git a/README.md b/README.md
index aa2de66..fa78a0a 100644
--- a/README.md
+++ b/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/)
diff --git a/config/env.js b/config/env.js
index 905fb12..80dcccc 100644
--- a/config/env.js
+++ b/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, .
// 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;
}, {})
diff --git a/config/getHttpsConfig.js b/config/getHttpsConfig.js
new file mode 100644
index 0000000..a13b854
--- /dev/null
+++ b/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;
diff --git a/config/modules.js b/config/modules.js
new file mode 100644
index 0000000..c6f0f32
--- /dev/null
+++ b/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();
diff --git a/config/paths.js b/config/paths.js
index e4c7466..60e428f 100644
--- a/config/paths.js
+++ b/config/paths.js
@@ -1,53 +1,68 @@
-const path = require("path");
-const fs = require("fs");
-const url = require("url");
+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/facebookincubator/create-react-app/issues/637
+// https://github.com/facebook/create-react-app/issues/637
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(path, needsSlash) {
- const hasSlash = path.endsWith("/");
- if (hasSlash && !needsSlash) {
- return path.substr(path, path.length - 1);
- } else if (!hasSlash && needsSlash) {
- return `${path}/`;
- } else {
- return path;
- }
-}
-
-const getPublicUrl = appPackageJson =>
- envPublicUrl || require(appPackageJson).homepage;
-
// 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