跳过至主要内容
版本:v8

开发技巧

解决权限错误

当全局安装包时,可能会出现 `EACCES` 权限错误。如果是这种情况,可能需要设置 npm 才能在没有提升权限的情况下运行。

注意

不建议将 `sudo` 与 npm 一起使用,因为它会导致进一步的复杂情况。

本指南提供了两种解决权限问题的方法。有关完整文档和其他选项,请参阅 npm 文档

选项 1

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

本指南将记录 nvm 的安装和使用。有关完整文档,请参阅 nvm 文档。有关其他选项和 Windows 说明,请参阅 npm 文档

  1. 安装 nvm。

    $ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
  2. 新终端现在将使用 nvm。要验证,请打开一个新的终端并运行以下命令。如果打印出内容,则安装成功。

    $ 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` 目录中,因此只要使用 `npm` 使用 `sudo`,权限错误就不会再发生。

选项 2

不适用于 Windows

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

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

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

更新依赖项

要更新 npm 依赖项,请运行以下命令,其中 `<package-name>` 是要更新的包

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

例如,要将 `@ionic/angular` 包更新到标记为 `latest` 的版本,请运行

npm install @ionic/angular@latest --save

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

代码编辑器

有很多代码编辑器可供选择。以下是一些我们最喜欢的编辑器

  • Visual Studio Code:微软开发的一款流行且免费的文本编辑器
  • Atom:GitHub 开发的一款可破解的文本编辑器
  • WebStorm:JetBrains 开发的一款功能强大的非免费编辑器

使用调试器

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

例如,如果函数没有返回正确的值,可以使用调试器逐步执行代码并检查变量。

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

当应用运行时,它将在该函数处暂停。从那里,可以使用开发者工具逐行运行 JavaScript 代码片段,并检查函数在何处断裂。

更改模式

默认情况下,当在浏览器中查看应用时,Ionic 将应用 `md` 模式。但是,由于 Ionic 组件会根据其平台进行调整,因此能够查看应用在 iOS 上的外观非常有用。为此,请在提供应用的 URL 中添加 `?ionic:mode=ios`。例如,如果应用在端口 `8100` 上提供服务,则 URL 将为:`https://127.0.0.1:8100/?ionic:mode=ios`。

注意

这不会更改浏览器看到的平台。平台由设备检测和检查用户代理确定。要更改平台,必须更改用户代理。为此,请使用 Ctrl+Shift+I(在 Mac 上为 Cmd+Option+I)打开 Chrome 开发者工具,然后使用 Ctrl+Shift+M(在 Mac 上为 Cmd+Option+M)启用设备模式。

Chrome DevTools showing the device mode with iPhone X selected.

从设备下拉菜单中选择设备将更改用户代理以及视窗的尺寸。

使用 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 和摄像头等原生功能。