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