我最有效率的一天是扔掉了 1000 行代码。——肯·汤普森T3】
在本章中，我们将讨论以下主题:
- 对工具集的建议
- 逐步安装本地组件
- 使用云服务的准备
正确的设置对生产发展至关重要。当你开始长途旅行时，你需要准备好一切，对吗？该工具集将使您富有成效，其他安装都是依赖项，如 Node.js 或 MongoDB。它们分别启用服务器端代码和持久性。除此之外，在云部分，我们将介绍部署和开发服务的设置。它们将使您能够将代码置于版本控制之下，并以可伸缩的方式进行部署。
本地设置是我们在项目工作时在开发机器上使用的。它包括从文件夹、浏览器、编辑器、HTTP 服务器到数据库的任何东西。图 2-1 显示了初始开发环境设置的示例。
如果您的 web 开发项目没有特定的开发文件夹，您可以在 Documents 文件夹中创建一个开发文件夹(路径将是Documents/Development)。为了处理代码示例，在 web 开发项目文件夹中创建一个fullstack-javascript文件夹；例如，如果您在Development文件夹中创建一个fullstack-javascript文件夹，路径将是Documents/Development/fullstack-javascript。您可以在 Mac OS X 上使用 Finder，或者在 OS X/Linux 系统上使用以下终端命令:
$ cd ∼/Documents
$ mkdir Development
$ cd Development
$ mkdir fullstack-javascript
图 2-1。
Initial development environment setup Tip
要从终端打开当前目录中的 Mac OS Finder 应用，只需键入并运行$ open .命令。在 Windows 上，终端是命令提示符。
要获取文件和文件夹列表，请使用以下 UNIX/Linux 命令:
$ ls
或者显示隐藏的文件和文件夹，如.git，使用这个:
$ ls -lah
$ ls的另一个替代物是$ ls -alt。-lah和-alt选项的区别在于，后者按时间顺序排序，而前者按字母顺序排序。
您可以使用 Tab 键自动完成文件和文件夹的名称。
稍后，您可以将示例复制到fullstack-javascript文件夹中，并在该文件夹中创建应用。
Tip
另一个有用的东西是在 Mac OS X 上的 Finder 中有新的“终端在文件夹中”选项。要启用它，请打开您的“系统偏好设置”(您可以使用 Command + Space，也就是 Spotlight)。找到键盘并点击它。打开键盘快捷键，然后点按“服务”。选中“在文件夹中新建端子”和“在文件夹中新建端子”复选框。关闭窗口(可选)。
我们建议您选择下载最新版本的 WebKit ( http://en.wikipedia.org/wiki/WebKit )或 Gecko at [http://en.wikipedia.org/wiki/Gecko_(layout_engine](http://en.wikipedia.org/wiki/Gecko_(layout_engine) )浏览器:
- Chrome (
http://www.google.com/chrome)(推荐) - 游猎(
http://www.apple.com/safari/) - Firefox (
http://www.mozilla.org/en-US/firefox/new
鉴于 Chrome 和 Safari 已经内置了开发工具，你将需要 Firefox 的 Firebug 插件(图 2-2 )。
图 2-2。
Chrome Developer Tools in action
Firebug 和开发人员工具允许开发人员做许多事情，包括:
图 2-3。
Google tutorials for mastering web developer tools
- 调试 JavaScript
- 操纵 HTML 和 DOM 元素
- 动态修改 CSS
- 监控 HTTP 请求和响应
- 运行概要文件并检查堆转储
- 查看加载的资源，如图像、CSS 和 JS 文件
有一些很棒的 Chrome 开发者工具(DevTools)教程，比如下面的和图 2-3 和 2-4 中显示的:
图 2-4。
Mastering Chrome DevTools
- 用代码学校探索和掌握 Chrome DevTools (
http://discover-devtools.codeschool.com/) - Chrome DevTools 视频( [
https://developers.google.com/chrome-developer-tools/docs/videos](http://en.wikipedia.org/wiki/Gecko_(layout_engine) - Chrome DevTools 概述(
https://developers.google.com/chrome-developer-tools
JavaScript 最大的好处之一就是你不需要编译代码。因为 JS 存在并运行在浏览器中，所以您可以在浏览器中进行调试！这是一种解释型语言，不是编译型语言。因此，我们强烈推荐一个轻量级的文本编辑器，而不是一个成熟的集成开发环境( http://en.wikipedia.org/wiki/Integrated_development_environment )或 IDE，但如果您已经熟悉并熟悉您选择的 IDE，如 Eclipse、(http://www.eclipse.org/)NetBeans(http://netbeans.org/)或 Aptana ( http://aptana.com/ )，请继续使用它。
以下是 web 开发中最流行的文本编辑器和 ide 列表:
图 2-6。
WebStorm IDE home page
图 2-5。
Sublime Text code editor home page
- TextMate (
http://macromates.com/):仅限 Mac OS X 版本，1.5 版免费 30 天试用，被称为 Mac OS X 的缺失编辑器 - 崇高文字(
http://www.sublimetext.com/): Mac OS X 和 Windows 版本都有。这是比 TextMate 更好的选择，具有无限的评估期(图 2-5 )。 - Coda (
http://panic.com/coda/):带 FTP 浏览器和预览的一体化编辑器，支持在 iPad 上开发。 - Aptana Studio (
http://aptana.com/):全尺寸 IDE，内置终端和许多其他工具。 - notepad++(http:notepad-plus-plus。org/ ):免费的仅支持 Windows 的轻量级文本编辑器，支持多种语言。
- WebStorm IDE (
http://www.jetbrains.com/webstorm/):功能丰富的 IDE，支持 Node.js 调试。它由 JetBrains 开发，并作为最智能的 JavaScript IDE 进行营销(图 2-6 )。 - MS Visual Studio (
https://www.visualstudio.com/features/node-js-vs):著名的 Visual Studio 环境的 Node.js 工具，来自 Redmond 的一家小公司。
版本控制系统( http://en.wikipedia.org/wiki/Revision_control )即使在只有一个开发人员的情况下也是必不可少的。此外，许多云服务(例如 Heroku)需要 Git 进行部署。我们也强烈建议习惯 Git 和 Git 终端命令，而不是使用 Git 可视化客户端和带有 GUI 的应用:GitX ( http://gitx.frim.nl/ )、Gitbox ( http://www.gitboxapp.com/ )或 GitHub for Mac ( http://mac.github.com/。
Subversion 是一个非分布式版本控制系统。本文比较了 Git 和 Subversion(https://git.wiki.kernel.org/index.php/GitSvnComparison)。
以下是在您的机器上安装和设置 Git 的步骤:
Download the latest version for your OS at http://git-scm.com/downloads (Figure 2-7).
图 2-7。
Downloading latest release of Git Install Git from the downloaded *.dmg package; that is, run the *.pkg file and follow the wizard. Find the terminal app by using Command + Space, a.k.a. Spotlight (Figure 2-8), on OS X. For Windows you could use PuTTY ( http://www.chiark.greenend.org.uk/∼sgtatham/putty/ ) or Cygwin ( http://www.cygwin.com/ ).
图 2-8。
Using Spotlight to find and run an application In your terminal, type these commands, substituting "John Doe" and johndoe@example.com with your name and e-mail: $ git config --global user.name "John Doe" $ git config --global user.email johndoe@example.com To check the installation, run command: $ git version You should see something like this in your terminal window (your version might vary; in our case it’s 1.8.3.2, as shown in Figure 2-9): git version 1.8.3.2
图 2-9。
Configuring and testing Git installation
生成 SSH 密钥并将它们上传到 SaaS/PaaS 网站将在后面介绍。
虽然您可以在没有本地 HTTP 服务器的情况下进行大部分前端开发，但是在使用 HTTP 请求/AJAX 调用加载文件时需要使用本地 HTTP 服务器。此外，一般来说，使用本地 HTTP 服务器是一个很好的做法。这样，您的开发环境就尽可能接近生产环境。
我建议您使用基于 Node 的工具作为静态 web 服务器。它们缺少图形用户界面，但是简单快捷。你可以用 npm(自带 Node.js 说明在本章后面):
- node-static (
https://github.com/cloudhead/node-static):内置缓存的静态文件服务器。 - http-server (
https://www.npmjs.com/package/http-server):零配置命令行 http 服务器。
如果您更喜欢 GUI 而不是命令行界面(CLI ),您可能会考虑对 Apache web 服务器进行以下修改。MAMP，MAMP 堆栈和 XAMPP 有直观的图形用户界面，允许您更改配置和主机文件设置。
- MAMP (
http://www.mamp.info/en/index.html): Mac，Apache，MySQL，for Mac OS X 的个人 web 服务器 - MAMP 栈(
http://bitnami.com/stack/mamp):BitNami(苹果应用商店)构建的带有 PHP、Apache、MySQL、phpMyAdmin 栈的 Mac App(https://itunes.apple.com/es/app/mamp-stack/id571310406?l=en)。 - XAMPP (
http://www.apachefriends.org/en/xampp.html): Apache 发行版，包含适用于 Windows、Mac、Linux 和 Solaris 的 MySQL、PHP 和 Perl。
Mac 主页的 MAMP 如图 2-10 所示。
图 2-10。
MAMP for Mac home page
以下步骤更适合基于 Mac OS X/Linux 的系统，但稍加修改后，它们也可用于 Windows 系统(即$PATH变量，步骤 3)。这里我们描述官方包中的 MongoDB 安装，因为我们发现这种方法更健壮，导致的冲突更少。不过，也有很多其他方法可以在 Mac 上安装它( http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/ )，例如使用 Brew，也可以在其他系统上安装( http://docs.mongodb.org/manual/installation/ )。
MongoDB can be downloaded at ( http://www.mongodb.org/downloads ). For the latest Apple laptops, like MacBook Air, select OS X 64-bit version. The owners of older Macs should browse the link at ( http://dl.mongodb.org/dl/osx/i386 ). Tip
要确定您的处理器的架构类型，请在命令行中键入$ uname -p。
Unpack the package into your web development folder (∼/Documents/Development or any other). If you want, you could install MongoDB into the /usr/local/mongodb folder. Optional: If you would like to access MongoDB commands from anywhere on your system, you need to add your mongodb path to the $PATH variable. For Mac OS X the open system paths file with: sudo vi /etc/paths or, if you prefer TextMate: mate /etc/paths And add this line to the /etc/paths file: /usr/local/mongodb/bin Create a data folder; by default, MongoDB uses /data/db. Please note that this might be different in new versions of MongoDB. To create it, type and execute the following commands in the terminal (Figure 2-11): $ sudo mkdir -p /data/db $ sudo chown id -u /data/db
图 2-11。
Initial setup for MongoDB: Create the data directory If you prefer to use a path other than /data/db you could specify it using the --dbpath option to mongod (the main MongoDB service). Go to the folder where you unpacked MongoDB. That location should have a bin folder in it. From there, type the following command in your terminal: $ ./bin/mongod If you see something like the following (and as in Figure 2-12) it means that the MongoDB database server is running: MongoDB starting: pid =7218 port=27017... By default, it’s listening at http://localhost:27017. If you go to your browser and type http://localhost:28017 you should be able to see the version number, logs, and other useful information. In this case the MondoDB server is using two different ports (27017 and 28017): One is primary (native) for the communications with apps and the other is a web-based GUI for monitoring and statistics. In our Node.js code we’ll be using only 27017. Don’t forget to restart the Terminal window after adding a new path to the $PATH variable.
图 2-12。
Starting up the MongoDB server Now, to take it even further, we can test to determine if we have access to the MongoDB console/shell, which will act as a client to this server. This means that we’ll have to keep the terminal window with the server open and running. Open another terminal window at the same folder and execute: $ ./bin/mongo You should be able to see something like "MongoDB shell version 2.0.6 ..." Then type and execute: > db.test.save( { a: 1 } ) > db.test.find() If you see that your record is being saved, then everything went well (Figure 2-13).
图 2-13。
Running MongoDB client and storing sample data Commands find and save do exactly what you might think they do.
详细说明也可登陆 MongoDB.org: Install MongoDB on OS X ( http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x )。对于 Windows 用户，在Installing MongoDB ( http://www.tuanleaded.com/blog/2011/10/installing-mongodb )有一篇很好的介绍文章。
Note
MAMP 和 XAMPP 的应用附带了 MySQL——一个开源的传统 SQL 数据库——和 phpMyAdmin——一个 MySQL 数据库的 web 接口。
在 Mac OS X(和大多数 UNIX 系统)上，使用 Control + C 来关闭进程。如果使用 Control + Z，它将使进程进入睡眠状态(或分离终端窗口)；在这种情况下，您可能会锁定数据文件，并且必须使用 kill 命令或活动监视器，并手动删除数据文件夹中的锁定文件。在普通的 Mac 终端命令+。是 Control + C 的替代。
这些都是必需的技术。在进入下一章之前，请确保您有这些文件。
Node.js: We need it for build tools and back-end apps. Browser JS libraries: We need them for front-end apps. LESS app: We need it to compile LESS into CSS (Mac OS X only).
Node.js 在 http://nodejs.org/#download 可用(图 2-14 )。安装很简单:下载归档文件并运行*.pkg包安装程序。要检查 Node.js 的安装，您可以键入并执行:
$ node -v
我在这本书里用的是 v5.1.0，并且用 v5.1.0 测试了所有的例子。如果你用的是另一个版本，风险自负。我不能保证这些例子会运行。
假设您有 5.1.0 版本，它应该会显示如下内容:
v5.1.0
如果您想在 Node.js 的多个版本之间切换，有一些解决方案可以满足您的需求:
- nvm(
https://github.com/creationix/nvm【T2”):node . js 版本管理器 - nave(
https://github.com/isaacs/nave):node . js 虚拟环境 - n(
https://github.com/tj/n【T2”):node . js 版本管理
Node.js 包已经包含了 Node 包管理器( https://npmjs.org ) (NPM)。我们将广泛使用 NPM 来安装 Node.js 模块。
图 2-14。
Node.js home page
前端 JavaScript 库从各自的网站下载和解包。这些文件通常放在开发文件夹中(例如:/Documents/Development)以备将来使用。通常，在缩小的生产版本(在第四章的 AMD 和 Require.js 部分有更多的介绍)和广泛丰富的注释开发版本之间有一个选择。
另一种方法是热链接来自 cdn 的这些脚本，例如 Google 托管库( https://developers.google.com/speed/libraries/devguide )、CDNJS ( http://cdnjs.com/ )、微软 Ajax 内容交付网络( http://www.asp.net/ajaxlibrary/cdn.ashx )等等。通过这样做，应用对一些用户来说会更快，但如果没有互联网，就根本无法在本地运行。
- 在
lesscss.org可以少做一个前端翻译。您可以将它解压到您的开发文件夹(∼/Documents/Development)或任何其他文件夹中。 - Twitter Bootstrap 是一个 CSS/LESS 框架。在
twitter.github.com/bootstrap有售。 - jQuery 在
jquery.com可用。 - Backbone.js 可在
backbonejs.org获得。 - 下划线. js 可在
underscorejs.org获得。 - Require.js 可在
requirejs.org获得。
LESS 应用是一个 Mac OS X 应用，用于将 LESS 动态编译为 CSS。在 incident57.com/less 有售(图 2-15 )。
图 2-15。
LESS App for Mac home page
下面几节讨论的云设置将允许您将代码置于版本控制之下，并以可伸缩的方式进行部署。
SSH 密钥提供了一个安全的连接，不需要每次都输入用户名和密码。对于 GitHub 库，后一种方法用于 HTTPS URL；比如https://github.com/azat-co/fullstack-javascript.git；前者使用 SSH URLs 比如git@github.com:azat-co/fullstack-javascript.git。
要在 Mac OS X/UNIX 机器上为 GitHub 生成 SSH 密钥，请执行以下操作:
Check for existing SSH keys: $ cd ∼/.ssh $ ls -lah If you see some files like id_rsa (please refer to Figure 2-16 for an example), you could delete them or back them up into a separate folder by using the following commands: $ mkdir key_backup $ cp id_rsa* key_backup $ rm id_rsa* Now we can generate a new SSH key pair using the ssh-keygen command, assuming we are in the ∼/.ssh folder: $ ssh-keygen -t rsa -C "your_email@youremail.com" Answer the questions; it is better to keep the default name of id_rsa. Then copy the content of the id_rsa.pub file to your clipboard (Figure 2-16): $ pbcopy < ∼/.ssh/id_rsa.pub
图 2-16。
Generating RSA key for SSH and copying public key to clipboard Alternatively, open id_rsa.pub file in the default editor: $ open id_rsa.pub Or in TextMate: $ mate id_rsa.pub
After you have copied the public key, go to github.com , log in, go to your account settings, select SSH Key, and add the new SSH key. Assign a name, such as the name of your computer, and paste the value of your public key. To check if you have an SSH connection to GitHub, type and execute the following command in your terminal: $ ssh -T git@github.com If you see something like this: Hi your-GitHub-username! You’ve successfully authenticated, but GitHub does not provide shell access. then everything is set up. The first time you connect to GitHub, you can receive an Authenticity of Host ... Can’t Be Established warning. Please don’t be confused with such a message—just proceed by answering Yes as shown in Figure 2-17.
图 2-17。
Testing SSH connection to GitHub for the very first time If for some reason you have a different message, please repeat Steps 3 and 4 from the previous section on SSH keys or reupload the content of your *.pub file to GitHub. Warning
保密你的文件，不要与任何人分享！
GitHub 提供了更多的说明:生成 SSH 密钥(https://help.github.com/articles/generating-ssh-keys)。
Windows 用户可能会发现[PuTTY]中的 SSH 密钥生成器功能非常有用。
以下是设置 Windows Azure 帐户的步骤:
You’ll need to sign up for Windows Azure Web Site and Virtual Machine previews. Currently they have a 90-day free trial available at https://azure.microsoft.com/en-us/ . Enable Git Deployment and create a user name and password, then upload the SSH public key to Windows Azure. Install the Node.js SDK, which is available at https://azure.microsoft.com/en-us/develop/nodejs/ . To check your installation type: $ azure -v You should be able to see something like this: Windows Azure: Microsoft’s Cloud Platform... Tool Version 0.6.0 Log in to Windows Azure Portal at https://windows.azure.com/ (Figure 2-18).
图 2-18。
Registering on Windows Azure Select New, then select Web Site, and Quick Create. Type the name that will serve as the URL for your web site, and click OK. Go to this newly created web site’s Dashboard and select Set Up Git Publishing. Come up with a user name and password. This combination can be used to deploy to any web site in your subscription, meaning that you do not need to set credentials for every web site you create. Click OK. On the follow-up screen, it should show you the Git URL to push to, something like this: https://azatazure@azat.scm.azurewebsites.net/azat.git You will also see instructions on how to proceed with deployment. We’ll cover them later. Advanced user option: Follow this tutorial to create a virtual machine and install MongoDB on it: Install MongoDB on a virtual machine running CentOS Linux in Windows Azure ( https://www.windowsazure.com/en-us/manage/linux/common-tasks/mongodb-on-a-linux-vm/ ).
Heroku 是一个多语言的敏捷应用部署平台(参见 http://www.heroku.com/ )。Heroku 的工作方式类似于 Windows Azure，你可以使用 Git 来部署应用。MongoDB 不需要安装虚拟机，因为 Heroku 有一个 MongoHQ 插件(https://addons.heroku.com/mongohq)。
要设置 Heroku，请按照下列步骤操作:
Sign up at ( http://heroku.com ). Currently they have a free account; to use it, select all options as minimum (0) and database as shared. Download Heroku Toolbelt at (https://toolbelt.heroku.com). Toolbelt is a package of tools; that is, libraries that consist of Heroku, Git, and Foreman ( https://github.com/ddollar/foreman ). For users of older Macs, get this client ( https://github.com/heroku/heroku ) directly. If you utilize another OS, browse Heroku Client GitHub ( https://github.com/heroku/heroku ). After the installation is done, you should have access to the heroku command. To check it and log in to Heroku, type: $ heroku login It will ask you for Heroku credentials (user name and password), and if you’ve already created the SSH key, it will automatically upload it to the Heroku web site (Figure 2-19).
图 2-19。
The response to the successful $ heroku login command If everything went well, to create a Heroku application inside of your specific project folder, you should be able to run this command: $ heroku create More detailed step-by-step instructions are available at Heroku: Quickstart ( https://devcenter.heroku.com/articles/quickstart ) and Heroku: Node.js ( https://devcenter.heroku.com/articles/nodejs ).
在这一章中，我们已经介绍了版本控制系统的技术设置、云客户端以及安装的各种工具和库。我们将在书中使用这些库和工具，因此安装并准备好它们是很重要的。此外，本章还提供了一些外部资源的链接，可以让你更好地理解和学习 web 开发工具。其中最有用的资源之一是 DevTools。
你一定很想开始真正的编码。等待结束了。在下一章中，我们将看到第一个 fullstack JavaScript 代码。