For mutual exchange and learning, please add me on wechat: iyangyuanjian, QQ:624508914

1, the preface

  • The project is a mid-stage system of internal and external services, which I call a hodgepodge
  • The project started at 18:31:39 seconds on October 8, 2015
  • Yes, it has been 3 years, 2 months and 18 days since I wrote the article

2. Why upgrade?

  • Because it’s so slow, deleting the cache takes time to compile and start250 秒
  • If there is a cache120More than a second
  • Hot updates are also slow10seconds
  • Release is not to mention, are tears, out of the BUG to fix, at least 20 minutes to fix

3. The effect achieved after the upgrade

  • Compilation starts with no cache40seconds
  • Compilation starts with a cache20seconds
  • Hot update1 ~ 3 秒

4. Structure of old projects

  • express
  • webpack
  • react
  • redux
  • Specific please seepackage.jsonIn the end

5. New project architecture

  • Pretty much the same, with a lot of startup tweaks and optimizations

Step on the pit road began

6.1 comb,package.json

  • Eliminate some packages that are not used in the old project
  • Distinguish between dev dependencies

6.2. Create a new development environment

  • Babel + Webpack + Express + React + React-Redux are all the latest updates
  • Update the React-router to 3.x (support React-16.x)
  • Related packages are gradually upgraded during testing
  • Automatically monitor whether the port is temporarily used. After the port is temporarily used, you can enter a new port to start
  • Automatically opens the browser after startup

After the above two processes are complete, start migrating the old project to the new development environment, and do not directly change the old project

6.3. The test of the old project is started

  • The old project was written in typescript and ran for so many years. The key is that it compiled successfully and replaced in batches
  • deletepackage.jsonIs not being applied in
  • Found the system heavily usedreact 的 PropTypesAfter 16, it was divided into separate packages and replaced into new packages in batches
  • There are somebabelSyntax problems, find a way to fix
  • Yeah, good start

conclusion

  • There were a lot of twists and turns, and it took two weeks, with 5-6 attempts to upgrade
  • As a backend, I felt like I had too much to learn and felt powerless
  • The hardest part about this whole projectbabelBecause it’s an old project, it existsmodule.exportsWriting method, as well as some other configurations, are temporary official documents, Google, Stack Overflow to find solutions, of course, also benefited
  • There’s some old project stuff that needs to be done, likeeslint.typescriptAccess, package and publish

Package. json for the new project

{
  "name": "XXX sensitive Information"."version": "1.0.0"."description": "XXX sensitive Information"."repository": "XXX sensitive Information"."author": "smithyj<[email protected]>"."private": true."scripts": {
    "start": "webpack-dashboard -- npm run start:pure"."start:nodemon": "webpack-dashboard -- npm run start:pure:nodemon"."start:pure": "cross-env NODE_ENV=development babel-node ./server/app.js"."start:pure:nodemon": "cross-env NODE_ENV=development nodemon ./server/app.js --exec babel-node"."build": "npm run build:prod"."build:prod": "cross-env NODE_ENV=production webpack"."build:test": "cross-env NODE_ENV=test webpack"."serve": "cross-env BUILD_SERVE=true npm run build:test && serve dist"."rsync:remote:test": "XXX sensitive Information"."rsync:remote:prod": "XXX sensitive Information"."deploy:remote:test": "npm run build:test && npm run rsync:remote:test"."deploy:remote:prod": "npm run build:prod && npm run rsync:remote:prod"."deploy:remote": "npm run deploy:remote:test && npm run deploy:remote:prod"
  },
  "devDependencies": {
    "@babel/cli": "^ 7.2.0"."@babel/core": "^ 7.2.0"."@babel/node": "^ 7.2.0"."@babel/plugin-proposal-class-properties": "^ 7.2.1"."@babel/plugin-proposal-decorators": "^ 7.2.2." "."@babel/plugin-proposal-do-expressions": "^ 7.2.0"."@babel/plugin-proposal-export-default-from": "^ 7.2.0"."@babel/plugin-proposal-export-namespace-from": "^ 7.2.0"."@babel/plugin-syntax-decorators": "^ 7.2.0"."@babel/plugin-syntax-dynamic-import": "^ 7.2.0"."@babel/plugin-transform-runtime": "^ 7.2.0"."@babel/polyfill": "^ 7.0.0." "."@babel/preset-env": "^ 7.2.0"."@babel/preset-react": "^ 7.0.0." "."babel-loader": "^ 8.0.4"."babel-plugin-add-module-exports": "^ 1.0.0"."body-parser": "^ 1.18.3"."cache-loader": "^ 1.2.5." "."chalk": "^ against 2.4.1." "."clean-webpack-plugin": "^ 1.0.0"."clipboardy": ^ "1.2.3"."cookie-parser": "^ 1.4.3"."copy-webpack-plugin": "^ 4.6.0"."cross-env": "^ 5.2.0." "."css-loader": "^ 2.0.1." "."detect-port": "^ 1.3.0"."express": "^ 4.16.4"."extract-css-chunks-webpack-plugin": "^ 3.2.1." "."file-loader": "^ 2.0.0." "."happypack": "^ 5.0.0"."html-webpack-plugin": "^ 3.2.0"."less": "^ 3.9.0"."less-loader": "^ 4.1.0." "."mini-css-extract-plugin": "^ 0.5.0"."morgan": "^ 1.9.1." "."nodemon": "^ 1.18.8"."optimize-css-assets-webpack-plugin": "^ 5.0.1." "."progress-bar-webpack-plugin": "^ 1.11.0"."react-dev-utils": "^ 6.1.1." "."serve": "^ 10.1.1"."serve-favicon": "^ 2.5.0"."style-loader": "^ 0.23.1"."uglifyjs-webpack-plugin": "^ 2.0.1." "."webpack": "^ 4.27.1"."webpack-cli": "^ 3.1.2." "."webpack-dashboard": "^ 2.0.0." "."webpack-dev-middleware": "^ 3.4.0"."webpack-hot-middleware": "^ 2.24.3",},"dependencies": {
    "ali-oss": "^ 5.2.0." "."antd": "^ 2.13.10"."autobind": "^ 1.0.3"."core-decorators": "^ 0.20.0"."create-react-class": "^ 15.6.3"."jump.js": "^ 1.0.2"."lodash": "^ 4.16.4"."lodash-decorators": "^ 4.5.0." "."md5": "^ 2.2.1." "."moment": "^ 2.19.4"."pdfjs-dist": "^ 1.9.528"."prop-types": "^ 15.6.2"."qrcode.react": "^ 0.7.2"."query-string": "^ 6.2.0"."rc-queue-anim": "^ 1.6.10"."rc-tween-one": "^ 1.7.2." "."react": "^ 16.7.0"."react-addons-update": "^ 15.6.2"."react-color": "^ 2.14.1"."react-copy-to-clipboard": "^ 5.0.1." "."react-dnd": "^ 2.1.2"."react-dnd-html5-backend": "^ 2.1.2"."react-dom": "^ 16.7.0"."react-drag-listview": "0.0.9"."react-mixin": "^ 5.0.0"."react-redux": "^ 6.0.0"."react-router": "^ 3.2.1." "."react-string-replace": "^ 0.4.0"."redux": "^ 3.3.1"."redux-form": "^ 5.3.3." "."redux-logger": "^ 2.7.0"."redux-promise": "^ 0.5.3"."redux-thunk": "^ 1.0.0"."simditor": "2.3.22"."simditor-fullscreen": ^ "while"."simditor-html": "^ 1.1.1"}}Copy the code

Package. json for the old project

{
  "name": "crm"."version": "0.0.1"."private": true."scripts": {
    "start": "webpack-dashboard -- cross-env NODE_ENV=development node ./server/bin/www"."start:pure": "NODE_ENV=development node ./server/bin/www"."clean": "rimraf client/dist/"."clean:cache": "rimraf ./.cache"."build": "cross-env BABEL_ENV=production webpack --config webpack.config.js"."build:test": "NODE_ENV=test npm run build"."build:prod": "NODE_ENV=production npm run build"."rsync:test": "XXX sensitive Information"."rsync:prod": "XXX sensitive Information"."deploy:test": "npm run build:test && npm run rsync:test"."deploy:prod": "npm run build:prod && npm run rsync:prod"."rsync:remote:test": "XXX sensitive Information"."rsync:remote:prod": "XXX sensitive Information"."deploy:remote:test": "npm run build:test && npm run rsync:remote:test"."deploy:remote:prod": "npm run build:prod && npm run rsync:remote:prod"."deploy:remote": "npm run deploy:remote:test && npm run deploy:remote:prod"."lint": "eslint --ext .js --ext .jsx client/src"."fix": "eslint --fix --ext .js --ext .jsx client/src"."prettier:fix": "prettier --write '**/*.{js,jsx,less,css.scss,html}'"."prebuild": "npm run clean"."commit": "commit-wizard"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"}},"lint-staged": {
    "*.{js,jsx,less,css,scss,html}": [
      "prettier --write"."git add"]."*.{js,jsx}": [
      "eslint --fix"."git add"]},"dependencies": {
    "ali-oss": "^ 5.2.0." "."antd": "^ 2.13.10"."assets-webpack-plugin": "^ 3.4.0"."autobind-decorator": "^ 2.1.0." "."axios": "^ 0.15.3"."bluebird": "^ 3.3.4." "."body-parser": "^ 1.15.1"."connect-multiparty": "^ 2.1.0." "."cookie-parser": "~ 1.4.0." "."core-decorators": "^ 0.20.0"."css-loader": "^ 0.28.7"."debug": "~ 2.2.0." "."del": "^ 3.0.0"."express": "^ 4.14.0"."fs-extra": "^ 4.0.3"."genny": "^ 0.5.6"."glob": "^ 7.0.0." "."hbs": "~ 4.0.0"."history": "^ 1.13.0"."html-webpack-plugin": "^ 1.6.2"."immutable": "^ 3.7.5." "."jump.js": "^ 1.0.2"."less": "^ 2.7.3." "."less-loader": "^ 4.0.5"."lodash": "^ 4.16.4"."lodash-decorators": "^ 4.5.0." "."logrocket": "^ 0.5.2"."md5": "^ 2.2.1." "."method-override": "*"."moment": "^ 2.19.4"."morgan": "^ 1.6.1." "."nodejieba": "^ 2.2.4." "."pdfjs-dist": "^ 1.9.528"."pinyin": "^ 2.8.0"."qrcode.react": "^ 0.7.2"."raw-loader": "*"."rc-animate": "^ 2.4.4." "."rc-queue-anim": "^ 0.12.6"."rc-tween-one": "^ 1.7.2." "."react": 15.3.1 ""."react-addons-css-transition-group": "^ 15.6.2"."react-addons-update": "^ 15.6.2"."react-color": "^ 2.14.1"."react-copy-to-clipboard": "^ 5.0.1." "."react-dnd": "^ 2.1.2"."react-dnd-html5-backend": "^ 2.1.2"."react-dom": 15.3.1 ""."react-drag-listview": "0.0.9"."react-froala-wysiwyg": "^ 2.8.1"."react-loadable": "^ 4.0.5"."react-mixin": "^ 4.0.0"."react-pure-render": "^ 1.0.2"."react-redux": "^ 5.0.6"."react-router": "^ 2.8.1"."react-string-replace": "^ 0.4.0"."redbox-react": "^ 1.5.0." "."redux": "^ 3.3.1"."redux-form": "^ 5.3.3." "."redux-logger": "^ 2.7.0"."redux-promise": "^ 0.5.3"."redux-thunk": "^ 1.0.0"."rimraf": "^ 2.4.3." "."serve-favicon": "^ 2.4.5"."simditor": "^ 2.3.19"."simditor-fullscreen": ^ "while"."simditor-html": "^ 1.1.1"."text-loader": "*"."url-loader": "^" 1.0.1
  },
  "devDependencies": {
    "babel-core": "^ 6.18.0"."babel-eslint": "^ 8.2.1." "."babel-loader": "^ 7.1.2." "."babel-plugin-add-module-exports": "^ 0.2.1"."babel-plugin-import": "^ 1.6.3." "."babel-plugin-lodash": "^ 3.3.2 rainfall distribution on 10-12"."babel-plugin-react-transform": "^ 3.0.0"."babel-plugin-transform-class-properties": "^ 6.16.0"."babel-plugin-transform-decorators-legacy": "^" 1.3.4."babel-plugin-transform-regenerator": "^ 6.26.0"."babel-polyfill": "^ 6.16.0"."babel-preset-env": "^ 1.6.1." "."babel-preset-es2015": "^ 6.16.0"."babel-preset-es2015-loose": "^ 8.0.0." "."babel-preset-react": "^ 6.16.0"."babel-preset-react-hmre": "^ 1.1.1"."babel-preset-stage-0": "^ 6.16.0"."babel-standalone": "^ 6.4.4." "."clean-webpack-plugin": "^ 0.1.8"."cross-env": "^ 5.1.3"."eslint": "^ 4.15.0"."eslint-config-prettier": "^ 3.3.0"."eslint-config-standard": "^ 10.2.1"."eslint-config-standard-jsx": "^ 4.0.1." "."eslint-config-standard-react": "^ 5.0.0"."eslint-plugin-import": "^ 2.8.0"."eslint-plugin-jsx-a11y": "^ 6.0.3"."eslint-plugin-node": "^ 5.2.1." "."eslint-plugin-prettier": "^ 3.0.0"."eslint-plugin-promise": "^ 3.6.0"."eslint-plugin-react": "^ 7.5.1." "."eslint-plugin-standard": "^ 3.0.1." "."extract-text-webpack-plugin": "^ 3.0.2." "."file-loader": "^ 1.1.6." "."husky": "^ 1.2.0"."lint-staged": "^ 8.1.0"."prettier": "^ 1.15.2"."progress-bar-webpack-plugin": "^ 1.3.0"."react-hot-loader": "^ 3.1.3"."react-router-loader": "^ 0.5.4"."react-transform-catch-errors": "^ 1.0.0"."react-transform-hmr": "^" 1.0.4."source-map-loader": "^ 0.2.1"."style-loader": "^ 0.19.0"."transfer-webpack-plugin": "^ 0.1.4"."uglifyjs-webpack-plugin": "^ 1.1.6." "."webpack": "^ 3.10.0"."webpack-bundle-analyzer": "^ 2.9.2." "."webpack-dashboard": "^ 0.4.0"."webpack-dev-middleware": "^ 1.12.2." "."webpack-dev-server": "^ 2.10.1"."webpack-hot-middleware": "^ 2.21.0"."webpack-md5-hash": "^ 0.0.5"."workbox-webpack-plugin": "^" 1.0.1
  },
  "engines": {
    "node": "> = 6"}}Copy the code