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上發布。