同一电脑系统下兼容 ionic1 与 ionic3 开发环境

同一系统下兼容 ionic1 与 ionic3 开发环境

以 mac 系统为例，全局配的是 ionic1 环境，要兼容的 ionic3 环境

要兼容的版本信息：

ionic (Ionic CLI) : 3.20.0
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) 
@ionic/app-scripts : 3.2.4
Cordova Platforms  : android 7.1.4
Ionic Framework    : ionic-angular 3.9.2
Node              : v8.7.0
npm               : 5.4.2 
OS                : macOS

思路

非全局安装 ionic3 环境。

步骤

1、切换 node 版本，使用 n 进行版本管理可快速切换（Node 版本管理控制器 n）：

切换到 v8.7.0

2、安装指定版本的 ionic 和 cordova ：

npm install cordova@8.1.2 --save-dev
npm install ionic@3.20.0 --save-dev

3、去掉 package.json 中 “@ionic/app-scripts” 版本号 ~ 或 ^ 前缀（非必须）：

"devDependencies": {
		  "@angular/cli": "7.3.8",
		  "@ionic/app-scripts": "3.2.3",
    	  "cordova": "8.1.2",
   	      "ionic": "3.20.0",
    	  "typescript": "2.6.2"
}

不去掉的话，小版本不对应，使用 --pord 参数 build 有可能会报错：

[17:35:51]  ngc started ... 
[17:36:28]  typescript error 
            Cannot find type definition file for '@types'. 
[17:36:28]  ionic-app-script task: "build" 
[17:36:28]  Error: Failed to transpile TypeScript 
Error: Failed to transpile TypeScript
......

4、安装工程所需依赖：

npm install

5、在 package.json 里面的 scripts 中 添加：

"scripts": {
    "start": "ionic-app-scripts serve",
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "info": "ionic info",
    "add-ios": "ionic cordova platform add ios",
    "add-android": "ionic cordova platform add android",
    "release-android": "ionic-app-scripts build --prod --target cordova --platform android && cordova build android --release",
    "add-plugin": "ionic cordova plugin add https://github.com/nordnet/cordova-hot-code-push.git"
  }

6、编译 www ：

npm run build

7、检查 ionic 版本是否正确：

npm run info

cli packages: (/Users/name/app/node_modules)

    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:

    cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1) 

local packages:

    @ionic/app-scripts : 3.2.4
    Cordova Platforms  : none
    Ionic Framework    : ionic-angular 3.9.2

System:

    Android SDK Tools : 26.1.1
    Node              : v8.7.0
    npm               : 5.4.2 
    OS                : macOS
    Xcode             : Xcode 10.2.1 Build version 10E1001 

Environment Variables:

    ANDROID_HOME : /Users/name/Library/Android/sdk

Misc:

    backend : pro

8、日常开发启动项目 ：

npm run start

9、添加平台：

npm run add-android

若果项目里有热更新插件，因为下载失败，可能会报错，需要手动添加：

npm run add-plugin
npm install

10、把相应的签名文件，配置文件放到生成的对应的工程目录下，编译，打包：

npm run release-android

11、其他：

注意，不要用全局 ionic 或者 cordova 命令。
ionic3 环境兼容 ionic1 也类似，只不过是非全局安装 ionic1 环境。