Skip to main content

开发技巧

解决权限错误​

¥Resolving Permission Errors

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

¥EACCES permission errors can occur when packages are installed globally. If this is the case, npm may need to be set up to operate without elevated permissions.

注意

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

¥Using sudo with npm is not recommended because it can lead to further complications.

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

¥This guide offers two options for resolving permission issues. See the npm docs for full documentation and additional options.

选项 1​

¥Option 1

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

¥The best way to avoid permission issues is to reinstall NodeJS and npm using a node version manager.

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

¥This guide will document nvm installation and usage. See the nvm docs for full documentation. See the npm docs for additional options and instructions for Windows.

  1. 安装 nvm。

    ¥Install nvm.

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

  2. 新终端现在将使用 nvm。要进行验证，请打开一个新终端并运行以下命令。如果打印出一些内容，则安装成功。

    ¥New terminals will now use nvm. To verify, open a new terminal and run the following. If something prints, the installation was successful.

    $ command -v nvm

  3. 要下载并安装 NodeJS 的最新 LTS 版本，请运行：

    ¥To download and install the latest LTS release of NodeJS, run:

    $ nvm install --lts

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

    ¥Set the newly installed NodeJS as the default environment:

    $ nvm alias default lts/*

  5. 新终端现在将使用 nvm 控制的 NodeJS。核实：

    ¥New terminals will now use the nvm-controlled NodeJS. To verify:

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

全局包现在将安装在 ~/.nvm 目录中，因此只要使用 npm 而不使用 sudo，就不会再出现权限错误。

¥Global packages will now be installed in the ~/.nvm directory, so permission errors should no longer occur as long as npm is used without sudo.

选项 2​

¥Option 2

Does not apply to Windows

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

¥Change the owner of npm's directories to the current user:

$ 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 的情况下全局安装软件包。

¥Since these global directories are no longer owned by root, packages can be installed globally without sudo.

更新依赖​

¥Updating Dependencies

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

¥To update an npm dependency, run the following, where <package-name> is the package to update:

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

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

¥For example, to update the @ionic/angular package to the release tagged latest, run:

npm install @ionic/angular@latest --save

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

¥It is recommended that packages get updated through the CLI since npm will now read package versions from the package-lock.json first.

代码编辑器​

¥Code Editors

有很多代码编辑器可供选择。这里有一些我们的最爱：

¥There are a lot of code editors to choose from. Here are some of our favorites:

  • Visual Studio Code：Microsoft 制作的流行且免费的文本编辑器

    ¥Visual Studio Code: a popular and free text editor made by Microsoft

  • Atom：GitHub 制作的可破解文本编辑器

    ¥Atom: a hackable text editor made by GitHub

  • WebStorm：JetBrains 提供的强大的非免费编辑器

    ¥WebStorm: a powerful non-free editor by JetBrains

使用调试器​

¥Using a Debugger

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

¥The debugger keyword can be used to debug an app. When most browsers encounters a debugger statement, running of JavaScript is stopped, and the browser will load its debugger. This can be used to set "breakpoints" in the app.

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

¥For example, if a function is not returning the correct value, the debugger can be used to step through the code and inspect variables.

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

当应用运行时，它将在此函数处暂停。从那里，开发者工具可用于逐行运行 JavaScript 片段，并检查函数到底在哪里中断。

¥When an app runs, it will pause at this function. From there, the developer tools can be used to run pieces of JavaScript, line by line, and inspect where exactly the function breaks.

改变模式​

¥Changing Mode

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

¥By default, when an app is viewed in the browser, Ionic will apply the md mode. However, since Ionic components adapt according to their platform, it is helpful to be able to view what the app will look like on iOS. To do this, add ?ionic:mode=ios to the URL where the app is being served. For example, if the app is served on port 8100, the url would be: http://localhost:8100/?ionic:mode=ios.

注意

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

¥This will not change which platform the browser sees being used. The platform is determined by device detection and inspecting the user-agent. To change the platform, the user-agent must be changed. To do this, open up Chrome DevTools with Ctrl+Shift+I(Cmd+Option+I on Mac), and then toggle device mode on with Ctrl+Shift+M(Cmd+Option+M on Mac).

Chrome DevTools showing the device mode with iPhone X selected.

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

¥Selecting devices from the device dropdown will change the user-agent, as well as the dimensions of the viewport.

使用 iOS 模拟器​

¥Using the iOS Simulator

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

¥The iOS simulator enables testing and debugging of an app before it reaches an actual device.

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

¥Before it can be used, Xcode, Apple's IDE, must be installed.

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

¥The Ionic CLI can then be used to run the app in the current directory on the simulator:

ionic cordova emulate ios -lc

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

¥Passing in the -lc flag will enable livereload and log console output to a terminal.

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

¥Xcode can also be used to launch the emulator and debug an app.

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

¥Open up Xcode and open ../path-to-app/platforms/ios/myApp.xcodeproj.

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

¥After the app loads, console output and device logs will be printed inside of Xcode's output window.

使用 Genymotion Android 模拟器​

¥Using the Genymotion Android Emulator

虽然 Android SDK 附带了一个普通模拟器，但它有时可能会很慢且无响应。

¥While the Android SDK comes with a stock emulator, it can be slow and unresponsive at times.

根尼运动 是一个替代模拟器，速度更快，并且仍然允许访问 GPS 和相机等原生功能。

¥Genymotion is an alternate emulator that is faster, and still allows access to native functionality like GPS and camera.

目录