refactor: 迁移使用 gastby & auto format

Author: visiky

.eslintrc.js

@@ -2,21 +2,21 @@ module.exports = {
   env: {
     browser: true,
     commonjs: true,
-    es6: true
+    es6: true,
   },
-  extends: "eslint:recommended",
+  extends: 'eslint:recommended',
   parserOptions: {
     ecmaFeatures: {
       experimentalObjectRestSpread: true,
-      jsx: true
+      jsx: true,
     },
-    sourceType: "module"
+    sourceType: 'module',
   },
-  plugins: ["react"],
+  plugins: ['react'],
   rules: {
-    "linebreak-style": ["error", "unix"],
-    quotes: ["error", "single"],
-    semi: ["error", "always"],
-    "no-unused-vars": "off" // 关闭规则
-  }
+    'linebreak-style': ['error', 'unix'],
+    quotes: ['error', 'single'],
+    semi: ['error', 'always'],
+    'no-unused-vars': 'off', // 关闭规则
+  },
 };

.gitignore

@@ -17,3 +17,8 @@ package-lock.json
 
 # vscode editor
 .vscode
+
+
+# gatsby
+.cache
+public

.prettierignore

@@ -0,0 +1,4 @@
+.cache
+package.json
+package-lock.json
+public

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "semi": true
+}

devServer.js

@@ -0,0 +1,23 @@
+module.exports = {
+  pathPrefix: '/resume',
+  siteMetadata: {
+    title: 'Resume Generator',
+    githubUrl: 'https://github.com/visiky/resume.git',
+    author: 'visiky',
+    contact: 'https://github.com/visiky',
+  },
+  flags: {
+    DEV_SSR: false,
+  },
+  plugins: [
+    {
+      resolve: 'gatsby-plugin-less',
+      options: {
+        strictMath: true,
+      },
+    },
+    // this (optional) plugin enables Progressive Web App + Offline functionality
+    // To learn more, visit: https://gatsby.dev/offline
+    // `gatsby-plugin-offline`,
+  ],
+};

gatsby-config.js

@@ -0,0 +1,32 @@
+const path = require('path');
+
+exports.onCreateWebpackConfig = ({ actions, loaders, stage, getConfig }) => {
+  const config = getConfig();
+
+  if (config.resolve) {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      '@': path.resolve(__dirname, 'src'),
+    };
+  } else {
+    config.resolve = {
+      alias: { '@': path.resolve(__dirname, 'src') },
+    };
+  }
+
+  // This will completely replace the webpack config with the modified object.
+  actions.replaceWebpackConfig(config);
+
+  if (stage === 'build-html' || stage === 'develop-html') {
+    actions.setWebpackConfig({
+      module: {
+        rules: [
+          {
+            test: /bad-module/,
+            use: loaders.null(),
+          },
+        ],
+      },
+    });
+  }
+};

gatsby-node.js

@@ -5,59 +5,38 @@
   "dependencies": {
     "antd": "^2.9.3",
     "material-ui": "^0.17.4",
-    "react": "^15.4.2",
-    "react-dom": "^15.4.2",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
     "react-event-listener": "^0.4.5",
     "redux": "^3.6.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.13.10",
-    "@babel/core": "^7.13.13",
-    "@babel/plugin-proposal-class-properties": "^7.13.0",
-    "@babel/preset-env": "^7.13.12",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.13.0",
     "@types/material-ui": "^0.21.8",
     "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
     "@types/react-redux": "^7.1.16",
-    "@types/react-tap-event-plugin": "^0.0.30",
-    "babel-loader": "^8.2.2",
     "babel-plugin-import": "^1.13.3",
-    "copy-webpack-plugin": "^4.0.1",
-    "cross-env": "^2.0.1",
-    "css-loader": "^0.28.11",
-    "eslint": "^7.23.0",
-    "eslint-config-airbnb": "^18.2.1",
-    "eslint-plugin-react": "^7.23.1",
-    "html-webpack-plugin": "^4.5.2",
-    "less": "^3.7.1",
-    "less-loader": "^4.1.0",
+    "gatsby": "^2.26.1",
+    "gatsby-plugin-less": "^5.2.0",
+    "less": "^4.1.0",
     "open-browser-webpack-plugin": "0.0.5",
-    "postcss-import": "^14.0.0",
-    "postcss-loader": "^3.0.0",
+    "prettier": "2.2.1",
     "prop-types": "^15.5.8",
     "react-hot-loader": "^4.13.0",
     "react-redux": "^5.0.4",
-    "react-tap-event-plugin": "^2.0.1",
     "redux-devtools-extension": "^2.13.0",
     "redux-form": "^6.6.3",
     "rimraf": "^2.5.4",
-    "style-loader": "^2.0.0",
     "ts-loader": "^8.0.18",
-    "typescript": "^4.2.3",
-    "url-loader": "^4.1.1",
-    "webpack": "^4.43.0",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2"
+    "typescript": "^4.2.3"
   },
   "scripts": {
-    "start": "node devServer.js",
-    "clean": "rimraf dist",
-    "eslint": "eslint --ext *.js src"
+    "start": "gatsby develop",
+    "build": "gatsby build",
+    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
+    "clean": "gatsby clean",
+    "deploy": "npm run clean && gatsby build --prefix-paths && gh-pages -d public"
   },
   "description": "This project was bootstrapped with [Create React App](https://github.com/facebookincubator/create-react-app).",
-  "main": "devServer.js",
   "repository": {
     "type": "git",
     "url": "[email protected]:visiky/resume.git"
@@ -71,4 +50,4 @@
     "url": "https://github.com/visiky/resume/issues"
   },
   "homepage": "https://github.com/visiky/resume#readme"
-}
+}

package.json

@@ -1,50 +1,50 @@
-import { ActionTypes } from 'constants/actionTypes'
+import { ActionTypes } from '../constants/actionTypes';
 
 /**
  * actionCreator
  * @param {*} payload
  * @return {object} action
  */
 
-export const setStyleColor = (color) => ({
+export const setStyleColor = color => ({
   type: 'SET_STYLE_COLOR',
   color,
-})
+});
 
-export const setTemplate = (templateId) => ({
+export const setTemplate = templateId => ({
   type: 'SET_TEMPLATE',
   templateId,
-})
+});
 
-export const setBasicInfo = (basicInfo) => ({
+export const setBasicInfo = basicInfo => ({
   type: ActionTypes.SET_BASIC_INFO,
   basicInfo,
-})
+});
 
-export const setExperience = (experiences) => ({
+export const setExperience = experiences => ({
   type: ActionTypes.SET_EXPERIENCE,
   experiences,
-})
+});
 
-export const setSkill = (skills) => ({
+export const setSkill = skills => ({
   type: ActionTypes.SET_SKILL,
   skills,
-})
+});
 
-export const setAppraisal = (appraisals) => ({
+export const setAppraisal = appraisals => ({
   type: ActionTypes.SET_APPRAISAL,
   appraisals,
-})
+});
 
 // export const clearBasicInfo = (basicInfo) => ({
 // 	type: ActionTypes.CLEAR_SET_BASIC_INFO,
 // 	basicInfo
 // });
 
-export const deleteInfo = (payload) => ({
+export const deleteInfo = payload => ({
   type: 'DELETE_INFO',
   payload,
-})
+});
 
 // export const clearAppraisal = (appraisal) => ({
 // 	type: ActionTypes.CLEAR_SET_APPRAISAL,
@@ -54,63 +54,63 @@ export const deleteInfo = (payload) => ({
 /**
  * @params {object} - 要进行调整的信息
  */
-export const adjustInfo = (payload) => ({
+export const adjustInfo = payload => ({
   type: 'ADJUST_INFO',
   payload,
-})
+});
 
-export const newSet = (actionType) => {
+export const newSet = actionType => {
   switch (actionType) {
     case 'SET_SKILL':
       return {
         type: 'SET_NEW_SKILL',
         skills: {},
-      }
+      };
     case 'SET_EXPERIENCE':
       return {
         type: 'SET_NEW_EXPERIENCE',
         experiences: {},
-      }
+      };
     case 'SET_APPRAISAL':
       return {
         type: 'SET_NEW_APPRAISAL',
         appraisals: '',
-      }
+      };
     default:
-      break
+      break;
   }
-}
+};
 
-export const clearSet = (payload) => {
+export const clearSet = payload => {
   const actionType = payload.actionType,
-    content = payload.content
+    content = payload.content;
   switch (actionType) {
     case 'SET_BASIC_INFO':
       return {
         type: ActionTypes.SET_BASIC_INFO,
         basicInfo: content,
-      }
+      };
     case 'SET_SKILL':
       return {
         type: ActionTypes.SET_SKILL,
         skills: content,
-      }
+      };
     case 'SET_EXPERIENCE':
       return {
         type: ActionTypes.SET_EXPERIENCE,
         experiences: content,
-      }
+      };
     case 'SET_APPRAISAL':
       return {
         type: ActionTypes.SET_APPRAISAL,
         appraisals: content,
-      }
+      };
     default:
-      break
+      break;
   }
-}
+};
 
 export const setFormSchema = (index = 0) => ({
   type: 'SET_FORM_SCHEMA',
   index,
-})
+});

src/actions/index.ts

@@ -1,16 +1,16 @@
-import React, { Component } from 'react'
-import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
+import React, { Component } from 'react';
+import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
 
-import FullWidthSection from './containers/FullWidthSection'
+import FullWidthSection from '../containers/FullWidthSection';
 
 class App extends Component {
   render() {
     return (
       <MuiThemeProvider>
         <FullWidthSection />
       </MuiThemeProvider>
-    )
+    );
   }
 }
 
-export default App
+export default App;