最近看ionic2，我擦，又更新版本了，我的内心顿时有点小害怕，大家都懂得。每次升级都会有不同的问题，折腾了，好吧，最后我还是想帮我的开源ionic3学习项目 《吃乎2》升到最新版本，好吧，一直折腾最终还是升到最新版本了。为了防止各位再次掉坑，我决定写下我的升级过程（ionic3.4.2=>ionic3.6.0）。
升级前的package.json
{ "name": "chihu", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve"
}, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/app-version": "^3.13.0", "@ionic-native/camera": "^3.12.1", "@ionic-native/code-push": "^3.12.1", "@ionic-native/core": "3.12.1", "@ionic-native/file": "^3.12.1", "@ionic-native/file-opener": "^3.12.1", "@ionic-native/image-picker": "^3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic-native/transfer": "^3.12.1", "@ionic/storage": "^2.0.1", "ionic-angular": "3.4.2", "ionic2-super-tabs": "^2.6.3", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12"
}, "devDependencies": { "@ionic/app-scripts": "1.3.8", "@ionic/cli-plugin-cordova": "1.5.0", "@ionic/cli-plugin-ionic-angular": "1.4.0", "ionic": "3.6.0", "typescript": "2.3.4"
}, "description": "An Ionic project"}升级后的package.json
{ "name": "chihu", "version": "0.0.1", "author": "Ionic Framework", "homepage": "http://ionicframework.com/", "private": true, "scripts": { "clean": "ionic-app-scripts clean", "build": "ionic-app-scripts build", "lint": "ionic-app-scripts lint", "ionic:build": "ionic-app-scripts build", "ionic:serve": "ionic-app-scripts serve"
}, "dependencies": { "@angular/common": "4.1.3", "@angular/compiler": "4.1.3", "@angular/compiler-cli": "4.1.3", "@angular/core": "4.1.3", "@angular/forms": "4.1.3", "@angular/http": "4.1.3", "@angular/platform-browser": "4.1.3", "@angular/platform-browser-dynamic": "4.1.3", "@ionic-native/app-version": "^3.13.0", "@ionic-native/camera": "^3.12.1", "@ionic-native/code-push": "^3.12.1", "@ionic-native/core": "3.12.1", "@ionic-native/file": "^3.12.1", "@ionic-native/file-opener": "^3.12.1", "@ionic-native/image-picker": "^3.12.1", "@ionic-native/splash-screen": "3.12.1", "@ionic-native/status-bar": "3.12.1", "@ionic-native/transfer": "^3.12.1", "@ionic/storage": "^2.0.1", "ionic-angular": "^3.6.0", "ionic2-super-tabs": "^4.0.1", "ionicons": "3.0.0", "rxjs": "5.4.0", "sw-toolbox": "3.6.0", "zone.js": "0.8.12"
}, "devDependencies": { "@ionic/app-scripts": "^2.1.3", "@ionic/cli-plugin-cordova": "1.6.2", "@ionic/cli-plugin-ionic-angular": "1.4.1", "ionic": "3.7.0", "typescript": "2.3.4"
}, "description": "An Ionic project"}根据官方指示
QQ20170811-192636.png
npm install -g ionic@latestnpm install @ionic/app-scripts@latest --save-dev npm install ionic-angular@latest --save
切换到项目目录，按顺序执行，执行完如图：
QQ20170811-192145.png
此时此刻心情有点小激动，因为除了WARN，没有报错，谢天谢地，好执行打包命令如下：
sudo ionic cordova build android --prod --aot
巴拉巴拉等了一分钟之后：
QQ20170811-192257.png
谢天谢地，打包居然没有报错，心想怎么这么顺利，哈哈哈，接下来打开app，我擦，进入之后白屏，脸黑了...：
Screenshot_2017-08-11-19-49-03-249_com.chihu.plue.png
我想没道理啊，打包都没报错怎么可能会白屏，一直白屏，是不是哪里出错了。百度，谷歌，stackoverflow，没找到想要的答案......
经过多此次测试，确定是@ionic/app-scripts的问题，只要我不升级它我就什么事都没有
npm install @ionic/app-scripts@latest --save-dev
但是我没放弃，坚决更新到最新，后来我就看@ionic/app-scripts github的 releases，终于发现了问题，如下：
QQ20170811-192514.png
QQ20170811-192606.png
在看下之前更新前的package.json会发现我的@ionic/app-scripts是"1.3.8"，按官方说明，升到2.x的需要在src/index.html文件里添加<script src="build/vendor.js"></script>，当然我的webpack是3.x版本的
更改ionic3.4.x的index.html，添加<script src="build/vendor.js"></script>如下：
QQ20170811-200147.png
再次打包，完美，提交热更新打开app完美运行，如图：
Screenshot_2017-08-11-20-02-54-722_com.chihu.plue.png =325x530
最后分享这个ionic3.6.0开源案例：
《吃乎2》
作者：DevonKong
链接：https://www.jianshu.com/p/41a9527fb572
随时随地看视频
