macOS 搭建 Ionic 5 & Cordova 开发环境
准备工作
环境依赖
- Node.js & Yarn
- Android Environment
- iOS Environment
Node.js 环境
Node.js
安装最新版本的 Node.js LTS。
检查 Node.js 版本：
node -v
v10.17.0
Yarn
安装最新版本的 Yarn。
检查 Yarn 版本：
yarn -v
1.19.1
Android 环境
JDK 8
下载安装 Java SE Development Kit 8 。
检查 Java 版本：
java -version
java version "1.8.0_231"
Java(TM) SE Runtime Environment (build 1.8.0_231-b11)
Java HotSpot(TM) 64-Bit Server VM (build 25.231-b11, mixed mode)
添加环境变量到当前用户 shell 配置文件：
# JAVA_HOME
echo 'export JAVA_HOME="$(/usr/libexec/java_home -v 1.8)"' >> ~/.zshrc
echo 'export PATH="$JAVA_HOME/bin:$PATH"' >> ~/.zshrc
# CLASS_PATH
echo 'export CLASS_PATH="$JAVA_HOME/lib"' >> ~/.zshrc
# 重新执行配置文件
source ~/.zshrc
Tips: 如使用的是 bash（macOS 默认的 shell），则配置文件为
~/.bash_profile。
查看环境变量：
echo $JAVA_HOME && echo $CLASS_PATH
/Library/Java/JavaVirtualMachines/jdk1.8.0_231.jdk/Contents/Home
/Library/Java/JavaVirtualMachines/jdk1.8.0_231.jdk/Contents/Home/lib
Gradle
使用 Homebrew 安装 Gradle：
brew cleanup && brew update && brew install gradle
检查 Gradle 版本：
gradle -v
Welcome to Gradle 6.0.1!
......
Android Studio
下载安装 Android Studio 。
启动 Android Studio，报错提示：
unable to access android sdk add-on list
点击 Cancel ，进入到 SDK Components Setup 界面，默认的 Android SDK Location 为 Android SDK 存放目录，不建议修改。
下载默认勾选的最新版本 Android SDK，完成后在 Welcome to Android Studio 界面点击 Configure > SDK Manager 打开 Android SDK 管理界面。
下载 Cordova 支持的最高版本的 API Level （这里是 28），关闭 Android Studio。
添加环境变量到当前用户 shell 配置文件：
# Android SDK Location
echo 'export ANDROID_SDK_ROOT="$HOME/Library/Android/sdk"' >> ~/.zshrc
# avdmanager, sdkmanager
echo 'export PATH="$PATH:$ANDROID_SDK_ROOT/tools/bin"' >> ~/.zshrc
# adb, logcat
echo 'export PATH="$PATH:$ANDROID_SDK_ROOT/platform-tools"' >> ~/.zshrc
# emulator
echo 'export PATH="$PATH:$ANDROID_SDK_ROOT/emulator"' >> ~/.zshrc
# 重新执行配置文件
source ~/.zshrc
查看打包工具目录：
ls $ANDROID_SDK_ROOT/build-tools
29.0.2
将最高版本的路径添加到环境变量 PATH 中：
# apksigner, zipalign
echo 'export PATH="$PATH:$ANDROID_SDK_ROOT/build-tools/29.0.2"' >> ~/.zshrc
# 重新执行配置文件
source ~/.zshrc
查看环境变量：
echo $ANDROID_SDK_ROOT
/Users/avinc/Library/Android/sdk
Android 模拟器
启动 Android Studio，点击 Configure > AVD Manager 打开 Android 模拟器管理界面。
创建 Android 模拟器，在镜像选择界面，下载上面安装的 Cordova 支持的最高版本的 API（这里是 28）对应的镜像。
下载完成后选择该镜像并完成创建，关闭 Android Studio。
iOS 环境
Xcode
从 App Store 安装 Xcode ，打开 Xcode，提示 Install Additional required components? ，点击 Install 完成安装。
确保 Xcode CLT 工具已安装：
xcode-select --install
xcode-select: error: command line tools are already installed, use "Software Update" to install updates
打开 Xcode，在导航栏依次点击 Xcode > Preferences > Accounts 添加自己的 Apple ID。
iOS 模拟器
打开 Xcode，在导航栏依次点击 Window > Devices and Simulators > Simulators 进入 iOS 模拟器管理界面，可删除所有不需要的模拟器，只保留一个需要的即可。
安装 Ionic
安装 Ionic
使用 Yarn 全局安装 Ionic：
yarn global add ionic --registry=https://registry.npm.taobao.org
检查 Ionic 版本：
ionic -v
5.4.13
设置 Ionic 默认包管理工具为 Yarn：
ionic config set --global npmClient yarn
安装 Cordova
使用 Yarn 全局安装 Cordova：
yarn global add cordova --registry=https://registry.npm.taobao.org
检查 Cordova 版本：
cordova -v
9.0.0 (cordova-lib@9.0.1)
构建测试
创建 Ionic 应用
创建一个名为 ionic-demo 的示例应用，跳过依赖安装：
ionic start ionic-demo my-first-app --cordova --type=angular --no-deps
进入 ionic-demo 应用目录，使用 Yarn 安装依赖：
yarn --ignore-optional --registry=https://registry.npm.taobao.org
构建 Android 应用
生成 Cordova 平台 Android 资源文件：
ionic cordova platform add android
打包 debug 应用：
ionic cordova build android --prod --debug
生成的应用路径为 platforms/android/app/build/outputs/apk/debug/app-debug.apk ，打开之前创建的 Android 模拟器，将应用拖入其中即完成安装。
构建 iOS 应用
构建 iOS 应用需要付费加入 Apple Developer Program，否则只能在模拟器中运行。
生成 Cordova 平台 iOS 资源文件：
ionic cordova platform add ios
复制 iOS 资源文件到 Cordova 平台目录：
ionic cordova prepare ios --prod
打开 Xcode，在导航栏依次点击 Xcode > File > Open ，选择项目目录下的 platforms/ios 目录打开，点击 Xcode 标题栏左边的三角按钮，即可在模拟器中运行应用。