feat: add installedCheck and update packages

.npmrc

@@ -1 +1,2 @@
 registry=https://registry.npm.taobao.org
+engine-strict=true

package.json

@@ -41,40 +41,44 @@
     "styled-reset": "^2.0.16"
   },
   "devDependencies": {
-    "@babel/cli": "^7.4.4",
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/cli": "^7.5.0",
+    "@babel/core": "^7.5.0",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "@commitlint/cli": "^8.0.0",
     "@commitlint/config-conventional": "^8.0.0",
-    "auto-changelog": "^1.13.0",
+    "auto-changelog": "^1.14.0",
     "autodll-webpack-plugin": "^0.4.2",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "css-loader": "^3.0.0",
-    "eslint": "^5.16.0",
-    "eslint-config-prettier": "^5.0.0",
-    "eslint-plugin-react": "^7.13.0",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "eslint": "^6.0.1",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
     "file-loader": "^4.0.0",
     "gh-pages": "^2.0.1",
     "happypack": "^5.0.1",
     "html-webpack-plugin": "^3.2.0",
-    "husky": "^2.4.1",
+    "husky": "^3.0.0",
     "interpolate-html-plugin": "^3.0.0",
-    "lint-staged": "^8.2.1",
+    "lint-staged": "^9.1.0",
     "mini-css-extract-plugin": "^0.7.0",
     "prettier": "^1.17.1",
     "react-dev-utils": "^9.0.1",
     "style-loader": "^0.23.1",
     "terser-webpack-plugin": "^1.3.0",
-    "url-loader": "^2.0.0",
-    "webpack": "^4.35.0",
-    "webpack-cli": "^3.3.4",
+    "url-loader": "^2.0.1",
+    "webpack": "^4.35.2",
+    "webpack-cli": "^3.3.5",
     "webpack-dev-server": "^3.7.2",
     "webpack-manifest-plugin": "^2.0.4",
     "webpack-merge": "^4.2.1"
+  },
+  "engines": {
+    "node": ">=10.0.0",
+    "npm": ">=6.0.0"
   }
 }

scripts/start.js

@@ -31,6 +31,7 @@ const createDevServerConfig = require('../config/webpackDevServer.config');
 
 const useYarn = fs.existsSync(paths.yarnLockFile);
 const isInteractive = process.stdout.isTTY;
+const installedCheck = require('installed-check');
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
@@ -40,7 +41,20 @@ if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 // Tools like Cloud9 rely on this.
 const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 8088;
 const HOST = process.env.HOST || '0.0.0.0';
-
+// 检查已安装的包和package.json中是否一致
+installedCheck().then(result => {
+  if (result.errors.length) {
+    let logStr = chalk.bgRed.bold(
+      'Dependency check errors: \n\n' + result.errors.join('\n') + '\n'
+    );
+    console.log(logStr);
+    let solveStr = chalk.bgGreenBright.bold(
+      'try running: "npm install" to solve this error' + '\n'
+    );
+    console.log(solveStr);
+    process.exit(1);
+  }
+});
 if (process.env.HOST) {
   console.log(
     chalk.cyan(

src/App.js

@@ -1,11 +1,15 @@
 import React from 'react';
 import Header from './components/Header';
 import Footer from './components/Footer';
+import styled from 'styled-components';
+const StyledBody = styled.section`
+  height: 60vh;
+`;
 const App = () => {
   return (
     <>
       <Header />
-      <div>body</div>
+      <StyledBody>body</StyledBody>
       <Footer />
     </>
   );

src/Global.style.js

@@ -24,6 +24,7 @@ const GlobalStyle = createGlobalStyle`
     position: relative;
   }
   #root{
+    min-height:100vh;
     background-image:linear-gradient(135deg, rgb(96, 108, 136) 0%, rgb(63, 76, 107) 100%);
   }
 

src/components/Footer.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled.footer`
+  height: 20vh;
   background: #333;
   color: #fff;
 `;

src/components/Header.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled.header`
+  height: 20vh;
   background: #333;
   color: #fff;
 `;