注:
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
网友评论