互相交流學習，請加我微信: iyangyuanjian，QQ:624508914

1、前言

• 該項目是公司內(nèi)部服務(wù)與外部服務(wù)的中臺系統(tǒng)，我稱之為大雜燴
• 項目始于：2015年10月8號 18:31:39秒
• 恩，沒錯，到寫文章為止，已經(jīng)迭代了整整 3年2個月18天

2、為什么要升級？

• 因為實在是太慢了，刪除緩存的情況下，要編譯啟動起來得花 250 秒
• 有緩存的情況下啟動得 120 多秒
• 熱更新也慢得 10 秒左右
• 發(fā)布就更不用說了，都是淚，出了 BUG 要修復的話，最少得等 20 分鐘才能修復

3、升級之后達到的效果

• 沒有緩存的情況下編譯啟動 40 秒左右
• 有緩存的情況下編譯啟動 20 秒左右
• 熱更新 1 ~ 3 秒

4、老項目架構(gòu)

• express
• webpack
• react
• redux
• 具體請看 package.json 在尾部

5、新項目架構(gòu)

• 基本不變，做了很多啟動時的調(diào)整和優(yōu)化

6、踩坑之路開始

6.1、梳理 package.json

• 把一些老項目中沒有用到的包給干掉
• 區(qū)分清楚 dev 依賴

6.2、創(chuàng)建新的開發(fā)環(huán)境

• babel + webpack + express + react + react-redux 都是最新版, 其余的升級后面再看
• react-router 升級到 3.x 最新版（支持 react 16.x ）
• 相關(guān)包在測試中慢慢升級
• 自動監(jiān)聽端口是否被暫用，端口暫用后可以輸入新端口啟動
• 啟動之后自動打開瀏覽器

上面兩部流程完了之后，開始遷移老項目到新開發(fā)環(huán)境中，不要直接在老項目改動

6.3、老項目測試啟動

• 之前老項目存在 typescript 寫法，居然可以正常運行這么多年，奇葩，關(guān)鍵還能編譯成功，批量替換掉
• 刪除 package.json 中沒有被應(yīng)用
• 發(fā)現(xiàn)系統(tǒng)大量用了 react 的 PropTypes，在 16 之后就拆分成單獨的包了，批量替換成新包
• 有一些 babel 語法問題，找方法修復
• 嗯，順利啟動

總結(jié)

• 其中過程曲折太多了，嘗試了兩個禮拜，期間進行了 5-6 次升級嘗試
• 作為一個后端，我感覺要學的東西太多了，有種有心無力的感覺
• 整個項目最難的地方在于 babel 因為是老項目，存在 module.exports 寫法，以及一些其他的配置，都是臨時看官方文檔，谷歌，Stack Overflow去找解決方案，當然也受益匪淺
• 還有些老項目的東西需要完成，比如 eslint, typescript 接入，打包發(fā)布

新項目的 package.json

{"name": "xxx 敏感信息","version": "1.0.0","description": "xxx 敏感信息","repository": "xxx 敏感信息","author": "smithyj<624508914@qq.com>","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 敏感信息","rsync:remote:prod": "xxx 敏感信息","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": "^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": "^0.1.1","simditor-html": "^1.1.1"} }復制代碼

老項目的 package.json

{"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 敏感信息","rsync:prod": "xxx 敏感信息","deploy:test": "npm run build:test && npm run rsync:test","deploy:prod": "npm run build:prod && npm run rsync:prod","rsync:remote:test": "xxx 敏感信息","rsync:remote:prod": "xxx 敏感信息","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": "^0.1.1","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","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"} }復制代碼

轉(zhuǎn)載于:https://juejin.im/post/5c1cc13ff265da61257815be

總結(jié)

以上是生活随笔為你收集整理的记一次 react 15.3.1 老项目升级到 react 16.7.0 之路的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。