美文网首页
Mac ionic打包IOS 记录

Mac ionic打包IOS 记录

作者: 一介书生独醉江湖 | 来源:发表于2020-05-29 13:44 被阅读0次
注:
  1 步骤可忽略的,如果没有发生相关错误,可以跳过;

1 安装node.js (步骤可忽略)

https://nodejs.org/en/download/

1.1 查看node版本

bogon:~$ node -v
v12.16.1

1.2 安装最新版本 (步骤可忽略)

sudo npm install npm -g
或
npm install

1.3 版本应该高于2.1.8

bogon:~$ npm -v
6.13.4

1.4 安装gulp

全局安装
npm install gulp@4.0.2 -g
/* 卸载 npm uninstall gulp  */

本地安装
npm install --save-dev gulp@4.0.2
/* 卸载 npm uninstall --save-dev gulp */

查看版本
gulp -v

CLI version: 2.2.1
Local version: 4.0.2

1.5 安装gulp-load-plugins(步骤可忽略)

npm i -g gulp-load-plugins

1.6 安装gulp-concat(步骤可忽略)

npm install gulp-concat

1.7 需要安装xcode的cli工具(步骤可忽略)

sudo xcode-select --install

2 安装cnpm并配置npm国内镜像(步骤可忽略)
在用npm下载安装各种包的时候经常会遇到无法正常下载的情况。所以我们需要将npm指向淘宝镜像 :
2.1、注册模块镜像:npm set registry https://registry.npm.taobao.org/
2.2、编译依赖的node的源码镜像:npm set distury https://npm.taobao.org/dist
2.3、创建package.json(该步骤可忽略)
这个文件的作用就是管理你本地安装的npm包(目录/Users/yourusername/package.json)

npm init -y

2.4、清空缓存

npm cache clean
或
npm cache clean --force
或
npm cache clear --force && npm install --no-shrinkwrap --update-binary

2.5、查看npm配置列表是否已经指向淘宝镜像:npm config list

bogon:~$ npm config list
; cli configs
metrics-registry = "https://registry.npm.taobao.org/"
scope = ""
user-agent = "npm/6.13.4 node/v12.16.1 darwin x64"

; userconfig /Users/yourusername/.npmrc
distury = "https://npm.taobao.org/dist"
registry = "https://registry.npm.taobao.org/"

; builtin config undefined
prefix = "/usr/local"

; node bin location = /usr/local/Cellar/node/13.12.0/bin/node
; cwd = /Users/yourusername
; HOME = /Users/yourusername
; "npm config ls -l" to show all defaults.

3 安装ionic

npm install -g cordova ionic

(步骤可忽略)
npm install bufferutil@^4.0.1
npm install utf-8-validate@^5.0.2

3.1 查看安装状态

bogon:~$ ionic -v
5.4.16
bogon:~$ cordova -v
9.0.0 (cordova-lib@9.0.1)

3.2 安装 native-run(步骤可忽略)

npm i -g native-run

3.3 安装 cordova-res(步骤可忽略)


npm i -g cordova-res
第一种处理:
安装过程下载 libvips-8.9.1-darwin-x64.tar.gz这个文件会比较慢,
可以手工下载后,放在 /Users/yourusername/.npm/_libvips/目录下

第二种处理:推荐
npm install cnpm -g --registry=http://registry.npm.taobao.org
cnpm i -g cordova-res

cordova-res -v
0.14.0

3.4 安装ionic/v1-toolkit(步骤可忽略)

npm install @ionic/v1-toolkit@latest --save-dev

4 项目打包
4.1 cd到项目目录/Users/yourusername/Documents/bjzx/apple/app_bjzx

ionic info
bogon:app_bjzx$ ionic info
Ionic:

   Ionic CLI         : 5.4.16 (/usr/local/lib/node_modules/ionic)
   Ionic Framework   : ionic1 1.3.1
   @ionic/v1-toolkit : 3.0.1

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 5.2.2
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 9 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 1.0.0

System:

   NodeJS : v12.16.1 (/usr/local/Cellar/node@10/v12.16.1/bin/node)
   npm    : 6.13.4
   OS     : macOS Catalina

4.2 删除项目node_modules目录
4.3 npm install

npm install

注解:每一个rn项目都有一个package.json文件,里面有很多组件信息
使用npm install将按照package.json安装所需要的组件放在生成的node_modules文件夹中
成功之后项目下会多一个目录:node_modules
5 生成应用
5.1 安装iso环境

ionic cordova platform add ios

platforms 目录下会多一个ios的目录

5.2 安装IOS模拟器与真机

模拟器
npm install -g  ios-sim
真机
npm install -g  ios-deploy

1 成功提示:
** BUILD SUCCEEDED **
/usr/local/bin/ios-deploy -> /usr/local/lib/node_modules/ios-deploy/build/Release/ios-deploy
+ ios-deploy@1.10.0

2 如果有错误:
You have not agreed to the Xcode license agreements
xcodebuild -license  之后一直敲空格,然后输入 agree 回车

5.3 编译

ionic cordova build ios (注意:此处生成的ios并不是最终的应用,是中间品,需要用Xcode继续编译才能生成ipa文件)

番外:
node版本降级:
1 查询node有哪些版本

brew search node

2 现在系统上,有两个版本的node了,我们需要指定默认使用哪一个

brew unlink node
brew link node@10

可忽略
echo 'export PATH="/usr/local/opt/node@10/bin:$PATH"' >> ~/.bash_profile

3 强制指定node版本(步骤可忽略)

brew link --force --overwrite node@10

4 查看node版本

node -v

5 vscode等软件使用node,需要注意
1 需要重启下,才能使用node命令
2 需要删除node_modules重新 npm install

6 node全局安装目录

/usr/local/lib/node_modules

参考:
https://www.jianshu.com/p/a4d9d62d44b0
https://www.jianshu.com/p/a4d9d62d44b0
https://www.jianshu.com/p/9a388a41829f
https://www.jianshu.com/p/898f9f108f95

相关文章

网友评论

      本文标题:Mac ionic打包IOS 记录

      本文链接:https://www.haomeiwen.com/subject/thsoahtx.html