ionic 开发技巧

解决权限错误

全局安装包时，可能会发生 EACCES 权限错误。如果是这种情况，可能需要将 npm 设置为在没有提升权限的情况下运行。

不建议将 sudo 与 npm 一起使用，因为它会导致进一步的并发症。

方法 1

避免权限问题的最佳方法是使用节点版本管理器重新安装 NodeJS 和 npm。

nvm 的安装和使用

1，安装nvm：

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

2，验证是否安装成功：

$ command -v nvm

3，下载并安装最新的 LTS 版本的 NodeJS：

$ nvm install --lts

4，将新安装的 NodeJS 设置为默认环境：

$ nvm alias default lts/*

5，新终端现在将使用 nvm 控制的 NodeJS：

$ node -v  # will print the version installed above
$ which npm  # will print a path somewhere within the ~/.nvm folder

全局包现在将安装在 ~/.nvm 目录中，因此只要在没有 sudo 的情况下使用 npm，权限错误就应该不再发生

方法 2

不适用于Windows

将 npm 目录的所有者更改为当前用户：

$ sudo chown -R $(whoami) /usr/local/{lib/node_modules,bin,share}
$ sudo chown -R $(whoami) ~/.npm ~/.npmrc

由于这些全局目录不再由 root 拥有，因此可以在没有 sudo 的情况下全局安装包。

更新依赖关系

更新 npm 依赖项：

npm install <package-name>@<version|latest> --save

例如，要将 @ionic/angular 包更新为标记为最新的版本：

npm install @ionic/angular@latest --save

建议通过 CLI 更新包，因为 npm 现在将首先从 package-lock.json 读取包版本。

代码编辑器

有很多代码编辑器可供选择：

• Visual Studio Code：由Microsoft制作的流行且免费的文本编辑器
• Atom：GitHub制作的可破解文本编辑器
• WebStorm：JetBrains 强大的非免费编辑器

调试工具

debugger 关键字可用于调试应用。当大多数浏览器遇到debugger 语句时，JavaScript 的运行将停止，浏览器将加载其调试器。这可用于在应用中设置“断点”。

例如，如果函数未返回正确的值，则可以使用调试器单步执行代码并检查变量。

function myBrokenFunction() {
  debugger;
  // do other stuff
}

当应用运行时，它将暂停此函数。从那里，开发人员工具可用于逐行运行JavaScript片段，并检查函数的确切位置。

更改模式

默认情况下，当在浏览器中查看应用程序时，Ionic 将应用 md 模式。但是，由于Ionic组件会根据其平台进行调整，因此能够查看应用程序在iOS上的外观会很有帮助。为此，请将 ?ionic:mode=ios 添加到提供应用程序的 URL。例如，如果应用在端口 8100 上提供，则 url 将为：http://localhost:8100/?ionic:mode=ios。

这不会改变浏览器看到正在使用的平台。该平台由设备检测和检查用户代理确定。要更改平台，必须更改用户代理。为此，请使用 Ctrl+Shift+I（Mac 上的 Cmd+Option+I）打开 Chrome DevTools，然后使用 Ctrl+Shift+M（Mac 上的 Cmd+Option+M）打开设备模式。

从设备下拉列表中选择设备将更改用户代理以及视口的尺寸。

使用 iOS 模拟器

iOS 模拟器允许在应用到达实际设备之前对其进行测试和调试。

在使用之前，必须安装Apple的IDE Xcode。

然后，可以使用 Ionic CLI 在模拟器上的当前目录中运行应用程序：

ionic cordova emulate ios -lc

传入 -lc 标志将启用实时重新加载并将日志控制台输出到终端。

Xcode 还可用于启动模拟器和调试应用。

打开Xcode并打开../path-to-app/platforms/ios/myApp.xcodeproj.

应用程序加载后，控制台输出和设备日志将打印在 Xcode 的输出窗口中。

使用 Genymotion Android 模拟器

虽然 Android SDK 带有一个库存模拟器，但它有时会很慢且反应迟钝。

Genymotion是一个替代模拟器，速度更快，并且仍然允许访问GPS和相机等本机功能。