美文网首页
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