mac web开发_如何设置Mac进行Web开发

mac web开发

While you can build basic websites with nothing more than a text editor and browser, you may want to up your game by adding a JavaScript framework like React or Vue and useful tools like Git to your workflow.

虽然可以只使用文本编辑器和浏览器来构建基本网站，但您可能希望通过向工作流程中添加JavaScript框架(如React或Vue)和有用的工具(如Git)来完善自己的游戏。

But wait! Your Mac isn’t ready. Before diving in, you’ll need to install a few items to that will save you from confusing errors later. 😩

可是等等！您的Mac尚未准备就绪。在开始之前，您需要安装一些物品，以免日后混淆错误。 😩

This article will guide you through the minimum setup you’ll need to get up and running with JavaScript-based web development on your Mac.

本文将指导您完成在Mac上启动和运行基于JavaScript的Web开发所需的最低设置。

Let’s go!

我们走吧！

更新您的Mac (Update Your Mac)

Before installing any new software, follow these instructions from Apple to upgrade macOS and your current software to the latest version.

在安装任何新软件之前，请按照Apple的这些说明将macOS和您当前的软件升级到最新版本。

选择一个终端应用 (Choose a Terminal App)

Since you’ll be interacting with your Mac using the command line in this article, you’ll need a terminal app.

由于您将使用本文中的命令行与Mac进行交互，因此需要一个终端应用程序。

Any of the following are good options:

以下任何一种都是不错的选择：

Hyper
超
iTerm2
iTerm2
Visual Studio Code’s integrated terminal
Visual Studio Code的集成终端
Terminal (the default app that comes with your Mac)
终端机 (Mac随附的默认应用程序)

If you aren’t sure which one to pick, choose Hyper.

如果您不确定该选择哪一个，请选择“超级”。

命令行开发人员工具 (Command Line Developer Tools)

The first thing you’ll need to install from the command line are your Mac’s command line developer tools. Installing these now will prevent weird errors later.

您需要从命令行安装的第一件事是Mac的命令行开发人员工具 。现在安装这些将防止以后出现奇怪的错误。

To check if the tools are already installed, type the following command in your terminal app and hit return:

要检查工具是否已经安装，请在终端应用程序中键入以下命令，然后按回车键：

xcode-select --version

If the result is not a version number, install the tools with this command:

如果结果不是版本号，请使用以下命令安装工具：

xcode-select --install

A dialog will appear asking if you’d like to install the tools. Click Install and the package will download and install itself.

将出现一个对话框，询问您是否要安装工具。单击安装，该软件包将下载并自行安装。

When the installation finishes, confirm the tools are now installed by rerunning the first command:

安装完成后，通过重新运行第一个命令来确认现在已安装工具：

xcode-select --version

The result should now be a version number.

结果现在应该是版本号。

家酿 (Homebrew)

Instead of installing the next few tools by going to each tool’s website, finding the download page, clicking the download link, unzipping the files, and manually running the installer, we’re going to use Homebrew.

我们将使用Homebrew ，而不是通过访问每个工具的网站来安装接下来的几个工具，找到下载页面，单击下载链接，解压缩文件，然后手动运行安装程序。

Homebrew is a tool that lets you install, update and uninstall software on your Mac from the command line. This is faster and safer than the manual approach and generally makes your development life easier.

Homebrew是一种工具，可让您从命令行在Mac上安装，更新和卸载软件。这比手动方法更快，更安全，并且通常使您的开发工作更轻松。

First, check if Homebrew is already installed:

首先，检查是否已安装Homebrew：

brew --version

If you don’t see a version number, install Homebrew with this command:

如果看不到版本号，请使用以下命令安装Homebrew：

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

I promise that’s the weirdest command you’ll see in this article! 😅 Thanks to Homebrew, the rest are simple.

我保证这是您在本文中看到的最奇怪的命令！ Home多亏了Homebrew，其余的都很简单。

Before moving on, confirm Homebrew is now installed:

在继续之前，请确认已安装Homebrew：

brew --version

节点和npm (Node and npm)

Node.js is a tool that allows your Mac to run JavaScript code outside of a web browser. If you want to run a JavaScript framework like React or Vue on your Mac, you’ll need to have Node installed.

Node.js是使您的Mac可以在Web浏览器之外运行JavaScript代码的工具。如果要在Mac上运行React或Vue这样JavaScript框架，则需要安装Node。

Node also includes npm (the Node Package Manager), which gives you access to a giant library of free code you can download and use in your projects.

Node还包括npm (节点程序包管理器)，它使您可以访问庞大的免费代码库，您可以在项目中下载和使用这些代码。

First, check if Node is already installed:

首先，检查是否已安装Node：

node --version

If not, install it with Homebrew:

如果没有，请使用Homebrew安装它：

brew install node

Finally, confirm Node and npm are now installed:

最后，确认已安装Node和npm：

node --version

npm --version

使用Git进行版本控制 (Version Control with Git)

Git is a tool that helps you track changes to your code and work with other developers on shared projects.

Git是一个工具，可帮助您跟踪代码更改并与其他开发人员一起处理共享项目。

Using Git on every project is a great habit to develop and will prepare you for future projects where Git may be required. Some tools (like GatsbyJS) also depend on Git being installed on your Mac, so you’ll need it even if you don’t plan to add it to your workflow.

在每个项目上使用Git是一个很好的养成习惯，它将为将来可能需要Git的项目做准备。一些工具(例如GatsbyJS )也依赖于Mac上安装的Git，因此即使您不打算将其添加到工作流中，也需要它。

Once again, start by checking if Git is already installed:

再次从检查是否已安装Git开始：

git --version

If not, install it:

如果没有，请安装它：

brew install git

And confirm the installation worked:

并确认安装成功：

git --version

Once in a while, run the following command and everything you’ve installed with Homebrew will update automatically:

偶尔运行以下命令，您通过Homebrew安装的所有内容都会自动更新：

brew update && brew upgrade && brew cleanup && brew doctor

That one command is all you need to keep your system up to date. 🙌

只需执行该命令即可使系统保持最新状态。 🙌

I usually run it when I start a new project, but feel free to do so whenever you like. (When you run this command, if Homebrew suggests additional commands for you to run, go ahead and run them. If a command begins with sudo and you are prompted for a password, use your Mac’s admin password.)

我通常在启动新项目时运行它，但是随时随地都可以运行。 (运行此命令时，如果Homebrew建议您运行其他命令，请继续运行它们。如果命令以sudo开头，并且提示您输入密码，请使用Mac的管理员密码。)

That’s it for the command line!

命令行就是这样！

代码编辑器 (Code Editor)

While you can write code in any text editor, using one that highlights and validates your code will make your life much easier.

虽然您可以在任何文本编辑器中编写代码，但使用突出显示并验证代码的编辑器将使您的工作变得更加轻松。

Any of the following are good options:

以下任何一种都是不错的选择：

Visual Studio Code
Visual Studio程式码
Atom
原子
Sublime Text
崇高文字

If you’re just getting started, choose Visual Studio Code.

如果您只是入门，请选择“ Visual Studio代码”。

浏览器 (Browser)

As you code, it helps to view the app or website you’re building in a browser to confirm it works. While you can use any browser for this, some include extra developer tools that show you details about your code and how to improve it.

在编写代码时，它有助于在浏览器中查看正在构建的应用程序或网站，以确认其正常工作。尽管您可以使用任何浏览器来实现此目的，但其中一些浏览器还包括其他开发人员工具，这些工具可以为您显示有关代码及其改进方法的详细信息。

Either of the following are good options:

以下任一项都是不错的选择：

Chrome
Chrome
Firefox
火狐浏览器

If you’re just getting started, choose Chrome.

如果您只是入门，请选择Chrome。

发现者 (Finder)

A quick tip here: you’ll want to show the files your Mac hides by default. (For example, git files are automatically hidden, but sometimes you’ll want to edit them.)

快速提示：默认情况下，您要显示Mac隐藏的文件。 (例如，git文件会自动隐藏，但有时您需要对其进行编辑。)

The easiest way to show your Mac’s hidden files is with the keyboard shortcut ⌘⇧. (Command + Shift + Period). This will alternate between showing and hiding these files so you can access them when you need them.

显示Mac隐藏文件的最简单方法是使用键盘快捷键⌘⇧。 (命令+ Shift +句号)。这将在显示和隐藏这些文件之间交替，因此您可以在需要时访问它们。

结论 (Conclusion)

You’re all set! 🎉

你们都准备好了！ 🎉

That’s all you need to get up and running with JavaScript-based front-end development on your Mac.

这就是在Mac上启动并运行基于JavaScript的前端开发所需要的全部内容。

To prevent confusion, I left out any items that aren’t strictly required. If you’d like to dive deeper into optional ways you can further customize your Mac for web development, check out the links below.

为避免混淆，我将所有非严格要求的项目都省略了。如果您想更深入地研究可选方式，可以进一步自定义Mac以进行Web开发，请查看以下链接。

进一步阅读 (Further Reading)

Setting up a Brand New Mac for Development by Tania Rascia
塔尼亚·拉斯西亚(Tania Rascia) 搭建了全新的Mac进行开发
Setting up a MacBook for Front-End Development by Ben Honeywill
设置MacBook进行前端开发作者：Ben Honeywill
Leaving Homestead: Finding the Best All-Around Local Development Environment by WebDevStudios (in case you need a PHP setup as well)
离开家园：通过WebDevStudios 找到最佳的全方位本地开发环境 (如果您还需要安装PHP)

Discuss on Twitter

在Twitter上讨论

Originally published at michaeluloth.com.

最初在michaeluloth.com上发布。