一、制作 Meteor 应用

欢迎来到这本关于 Meteor 的书。 Meteor 是一个令人兴奋的新 JavaScript 框架，我们很快就会看到用更少的代码实现真实和令人印象深刻的结果是多么容易。

在这一章中，我们将学习需求是什么，以及开始时需要哪些额外的工具。 我们将看到让我们的第一个 Meteor 应用运行是多么简单，以及 Meteor 应用的一个良好的基本文件夹结构。 我们还将了解 Meteor 的自动构建过程和它加载文件的具体方式。

我们还将看到如何使用 Meteor 官方包装系统添加包。 在本章的最后，我们将简要介绍 Meteor 的命令行工具及其一些功能。

为此，我们将涵盖以下主题:

  • Meteor 的全栈框架
  • Meteor 的要求
  • 安装 Meteor
  • 添加基本包
  • Meteor 的文件夹约定和加载顺序
  • Meteor 的命令行工具

Meteor 全栈架构

Meteor 不仅仅是一个像 jQuery 或 AngularJS 这样的 JavaScript 库。 它是一个包含前端库、基于 node .js 的服务器和命令行工具的全栈解决方案。 所有这些让我们能够在服务器和客户端使用一致的 API，用 JavaScript 编写大规模的 web 应用。

即使 Meteor 很年轻,已经等几个公司 https://lookback.io,https://respond.ly,和https://madeye.io 在生产环境中使用 Meteor。

如果你想亲眼看看 Meteor 做了什么，看看http://madewith.meteor.com。

Meteor 使我们能够轻松快速地构建 web 应用，并处理诸如文件链接、缩小和连接文件等枯燥的过程。

以下是 Meteor 的一些亮点:

  • 当数据发生变化时，模板会自动更新，我们可以以惊人的速度构建复杂的 web 应用
  • 当客户端使用我们的应用时，我们可以将新代码推送给他们
  • Meteor 核心软件包附带一个完整的帐户解决方案，允许无缝集成 Facebook, Twitter，和更多
  • 数据将自动在客户端之间同步，几乎实时地保持每个客户端处于相同的状态
  • 延迟补偿将使我们的界面显得超级快，而服务器响应发生在后台。

有了 Meteor，我们永远不需要在 HTML 中链接文件的<script>标签。 Meteor 的命令行工具自动收集 JavaScript 或 CSS 文件在我们的应用的文件夹和链接他们在index.html文件，这是服务于客户端在初始页面加载。 这使得在单独的文件中构造代码就像创建它们一样简单。

Meteor 的命令行工具还可以查看我们应用文件夹中的所有文件的更改，并在更改时重新构建它们。

此外，它启动一个 Meteor 服务器，为客户端提供应用的文件。 当一个文件改变，Meteor 重新加载网站的每个客户端，同时保持其状态。 这叫做热码重新加载。

在生产中，构建过程还串联并最小化我们的 CSS 和 JavaScript 文件。

通过简单地添加less和coffee核心包，我们甚至可以在 LESS 中编写所有样式，在 CoffeeScript 中编写代码，而不需要额外的努力。

命令行工具也是部署和绑定应用的工具，以便我们可以在远程服务器上运行它。

听起来很棒的? 让我们来看看使用 Meteor 需要什么。

Meteor 的要求

Meteor 是不仅仅是一个 JavaScript 框架和服务器。 正如我们前面看到的，它也是一个命令行工具，为我们准备了完整的构建过程。

目前官方支持的操作系统如下:

这本书和所有的例子使用Meteor 1.0。

使用 Chrome 的开发工具

我们还将需要谷歌 Chrome 或 Firefox 安装了 Firebug 插件，以遵循需要控制台的示例。 本书中的示例、截图和解释将使用谷歌 Chrome 的开发工具。

使用 Git 和 GitHub

我高度推荐使用GitHub，当使用 web 项目时，例如我们将在本书中工作的项目。 Git 和 GitHub 帮助我们备份我们的进度，让我们总是回到以前的状态，同时看到我们已经改变了什么。

Git 是一个版本控制系统，由 Linux 的发明者 Linus Torvalds 于 2005 年创建。

使用 Git，我们可以提交代码的任何状态，然后返回到那个确切的状态。 它还允许多个开发人员在相同的代码库上工作，并在一个自动化的过程中合并他们的结果。 如果在此过程中出现冲突，合并开发人员可以通过删除不需要的代码行来解决这些合并冲突。

我还建议在http://github.com注册一个帐户，因为这是浏览我们的代码历史的最简单的方法。 他们有一个易于使用的界面，以及一个伟大的 Windows 和 Mac 应用。

要遵循本书中的代码示例，您可以从本书的网页https://www.packtpub.com/books/content/support/17713下载每一章的所有代码示例。

此外，您还可以从http://github.com/frozeman/book-building-single-page-web-apps-with-meteor克隆这本书的代码。 这个存储库中的每个标记都相当于这本书的一个章节，提交历史将帮助您查看每个章节中所做的更改。

安装 Meteor

安装 Meteor 就像在终端中运行以下命令一样简单:

$ curl https://install.meteor.com/ | sh

就是这样! 这将安装 Meteor 命令行工具($ meteor)，Meteor 服务器，MongoDB 数据库，和 Meteor 核心包(库)。

注释

所有命令行示例都在 Mac OS X 上运行和测试，在 Linux 或 Windows 系统上可以不同。

安装 Git

要安装 Git，我建议从https://mac.github.com或https://windows.github.com安装 GitHub 应用。 然后，我们可以简单地进入应用的Preferences，并点击Advanced选项卡内的Install Command Line Tools按钮。

如果我们想要手动安装 Git 并通过命令行设置它,我们可以从 http://git-scm.com【下载 Git 安装 T1】并遵循这个伟大的指导https://help.github.com/articles/set-up-git。

现在，打开终端，运行如下命令，检查是否安装成功:

$ git

提示

下载示例代码

您可以从您的账户http://www.packtpub.com下载您购买的所有 pack 书籍的示例代码文件。 如果您在其他地方购买了这本书，您可以访问http://www.packtpub.com/support并注册，直接将文件通过电子邮件发送给您。

这将返回一个 Git 选项列表。 如果我们得到command not found: git，我们需要检查git二进制文件是否被正确地添加到PATH环境变量中。

如果一切顺利，我们准备创建我们的第一款 Meteor 应用。

创建我们的第一个应用

为了创建我们的第一个应用，我们打开终端，进入我们想要创建我们的新项目的文件夹，并输入以下命令:

$ cd my/developer/folder
$ meteor create my-meteor-blog

Meteor 现在将创建一个名为my-meteor-blog的文件夹。 Meteor 在这个文件夹中为我们创建的 HTML, CSS 和 JavaScript 文件已经是一个完全工作的 Meteor 应用。要看到它的行动，运行以下命令:

$ cd my-meteor-blog
$ meteor

Meteor 现在会在3000端口为我们启动一个本地服务器。 现在，我们可以打开网页浏览器，导航到http://localhost:3000。 我们将看到应用运行。

这个应用没有做太多，除了显示一个简单的响应示例。 点击点击我按钮，计数器会增加:

Creating our first app

对于后面的例子，我们将需要谷歌 Chrome 的开发工具。 打开控制台,我们可以按Alt+命令+我在 Mac OS X 或点击右上角的菜单按钮 Chrome,选择更多的工具,【显示】,然后开发工具。

*开发工具允许我们检查我们的网站的 DOM 和 CSS，以及有一个控制台，我们可以与我们的网站的 JavaScript 交互。

创建一个好的文件夹结构

对于这本书，我们将从头开始构建我们自己的应用。 这也意味着我们必须建立一个可持续的文件夹结构，这有助于我们保持代码的组织性。

在 Meteor 中，我们的文件夹结构非常灵活。 这意味着我们可以把文件放在任何我们想要的地方，只要它们在应用的文件夹中。 Meteor 对特定文件夹的处理是不同的，允许我们只在客户端、服务器或两者上公开文件。 我们稍后将查看这些特定的文件夹。

但是，首先让我们开始动手，删除我们新创建的应用文件夹中的所有 preadd 文件，并创建以下文件夹结构:

- my-meteor-blog
  - server
  - client
    - styles
    - templates

预添加样式文件

为了充分关注 Meteor 代码，同时又有一个漂亮的博客，我强烈建议您从本书的网页http://packtpub.com/books/content/support/17713下载本章附带的代码。 它们将包含两个放置样式文件(lesshat.import.less和styles.less)，这将让你的示例博客在接下来的章节中看起来很漂亮。

您也可以直接从 GitHubhttps://github.com/frozeman/book-building-single-page-web-apps-with-meteor/tree/chapter1/my-meteor-blog/client/styles下载这些文件，并手动复制到my-meteor-blog/client/styles文件夹。

接下来，我们需要添加一些基本包，以便开始构建应用。

添加基本包

Meteor 中的软件包可以添加到我们的项目中。 Meteor 包的好处在于，它们是独立的单位，可以跳出盒子。 它们主要是添加一些模板功能，或者在项目的全局命名空间中提供额外的对象。

包也可以添加特性到 Meteor 的构建过程中，如stylus包，它让我们用stylus预处理器语法编写应用的样式文件。

对于我们的博客，我们首先需要两个包:

less:这是 Meteor 的核心包，将编译我们的风格文件的飞行到 CSS

jeeeyul:moment-with-langs:该是用于日期解析和格式化的第三方库

添加核心包

要添加less包，只需打开终端，进入我们的 projects 文件夹，输入以下命令:

$ meteor add less

现在，我们能够在我们的项目中使用任何*.less文件，Meteor 将自动编译他们在其构建过程中为我们。

添加第三方包

为了添加一个第三方包，我们可以简单地在 Meteor 包系统的前端https://atmospherejs.com上搜索包，或者使用命令行工具$ meteor search <package name>。

对于我们的博客，我们将需要jeeeyul:moment-with-langs包，它允许我们稍后简单地操作和格式化日期。

包的命名空间是作者的名字加上冒号。

要添加moment包，只需输入以下命令:

$ meteor add jeeeyul:moment-with-langs

在这个过程完成后，我们使用$ meteor重新启动我们的应用，我们将在我们的应用全局命名空间中有moment对象可用，我们可以在接下来的章节中使用它。

如果我们只想添加包的特定版本，可以使用以下命令:

$ meteor add jeeeyul:moment-with-langs@=2.8.2

如果你想要 1.0.0(而不是 2.0.0)范围内的版本，请使用以下命令:

$ meteor add jeeeyul:moment-with-langs@1.0.0

为了只更新包，我们可以简单地运行以下命令:

$ meteor update –-packages-only

此外，我们只能使用以下命令更新一个特定的包:

$ meteor update jeeeyul:moment-with-langs

就是这样! 现在，我们已经完全准备好开始创建第一个模板了。 你可以直接进入下一章，但请确保你回来继续阅读，因为我们现在将讨论 Meteor 的建造过程更详细。

变量范围

为了理解 Meteor 的构建过程及其文件夹约定，我们需要快速查看一下变量范围。

Meteor 在提供服务之前将每个代码文件包装在一个匿名函数中。 因此，声明一个带有var关键字的变量将使它只在该文件的作用域中可用，这意味着这些变量不能在你的应用的任何其他文件中访问。然而，当我们声明一个没有这个关键字的变量时，我们使它成为一个全局可用的变量， 这意味着它可以从我们的应用中的任何文件中访问。为了理解这一点，我们可以看一下下面的例子:

// The following files content
var myLocalVariable = 'test';
myGlobalVariable = 'test';

在 Meteor 的构建过程之后，前面的代码行如下:

(function(){
  var myLocalVariable = 'test';
  myGlobalVariable = 'test';
})();

这样，用var创建的变量是匿名函数的局部变量，而另一个可以全局访问，因为它可以在其他地方创建。

Meteor 的文件夹约定和加载顺序

虽然 Meteor 没有对我们的文件夹名称或结构施加限制，但有命名约定，帮助 Meteor 的构建过程确定文件需要加载的顺序。

下表描述了该文件夹及其具体加载顺序:

|

文件夹名称

|

负载行为

| | --- | --- | | client | 这只在客户端加载。 | | client/compatibility | 它不会被包装在匿名函数中。 这适用于使用var声明顶级变量的库。 此外，此文件夹中的文件将先于客户端上的其他文件加载。 | | server | 此文件夹中的文件将只在服务器上提供。 | | public | 这个文件夹可以包含客户端使用的资产，如图像，favicon.ico，或robots.txt。 公共文件夹中的文件夹和文件可从根目录/在客户端上使用。 | | private | 此文件夹可以包含仅在服务器上可用的资源。 这些文件可以通过AssetsAPI 获得。 | | lib | lib文件夹中的文件和子文件夹会在其他文件之前加载，更深的文件夹中的lib文件夹会在其父文件夹的lib文件夹中的文件之前加载。 | | tests | 这个文件夹中的文件不会被 Meteor 碰或加载。 | | packages | 当我们想要使用本地软件包时，我们可以将它们添加到这个文件夹中，Meteor 将使用这些软件包，即使在 Meteor 的官方软件包系统中存在同名的软件包。 (但是，我们仍然需要使用$ meteor add ....添加包) |

下表描述了创建了特定加载顺序的文件名:

|

文件名

|

负载行为

| | --- | --- | | main.* | 具有此名称的文件最后加载，而更深层次文件夹中的文件在它们的父文件夹的文件之前加载 | | *.* | 在客户端和服务器上同时加载表中前面提到的文件夹之外的文件 |

因此，我们看到 Meteor 收集了除public、private、tests外的所有文件。

此外，文件总是按字母顺序加载，子文件夹中的文件在父文件夹中的文件之前加载。

如果我们在client或server文件夹外有文件，并且想要确定代码应该在哪里执行，我们可以使用以下变量:

if(Meteor.isClient) {
  // Some code executed on the client
}

if(Meteor.isServer) {
  // Some code executed on the server. 
}

我们还可以看到，最后加载的是main.*文件中的代码。 为了确保特定的代码只在所有文件加载和客户端上的 DOM 准备好时加载，我们可以使用 Meteor 的startup()函数:

Meteor.startup(function(){
  /*
  This code runs on the client when the DOM is ready,
  and on the server when the server process is finished starting.
  */
});

在服务器上加载资产

要从服务器的private文件夹内加载文件，可以使用AssetsAPI，如下所示:

Assets.getText(assetPath, [asyncCallback]);
// or
Assets.getBinary(assetPath, [asyncCallback])

这里，assetPath是相对于private文件夹的文件路径，例如，subfolder/data.txt'。

如果我们提供一个回调函数作为第二个参数，Assets()方法将异步运行。 因此，我们有两种方法来检索资产文件的内容:

// Synchronously
var myData = Assets.getText('data.txt');

// Or asynchronously
Assets.getText('data.txt', function(error, result){
  // Do somthing with the result.
  // If the error parameter is not NULL, something went wrong
});

注释

如果第一个示例返回错误，则当前服务器代码将失败。 在第二个示例中，我们的代码仍然可以工作，因为错误包含在error参数中。

现在我们已经了解了 Meteor 的基本文件夹结构，让我们简要地看看 Meteor 的命令行工具。

Meteor 的命令行工具

现在我们已经知道了 Meteor 的构建过程和文件夹结构，我们将更仔细地看看我们可以用 Meteor 提供的命令行工具做什么。

正如我们所看到的，当使用meteor命令时，我们需要在一个 Meteor 项目，以便所有的行动将在这个项目上执行。 例如，当我们运行meteor add xxx时，我们将一个包添加到当前所在的项目中。

更新 Meteor

如果 Meteor 发布了一个新版本，我们可以简单地通过运行以下命令更新我们的项目:

$ meteor update

如果我们想回到以前的版本，我们可以运行以下命令:

$ meteor update –-release 0.9.1

这将使我们的项目回到 0.9.1 版本。

部署 Meteor

部署我们的 Meteor 应用到公共服务器是简单的运行以下命令:

$ meteor deploy my-app-name

这将要求我们注册一个 Meteor 开发者帐户，并在http://my-app-name.meteor.com部署我们的应用。

关于如何部署 Meteor 应用的完整介绍，请参考第 10 章，部署我们的应用。

在附录中，您可以找到完整的 Meteor 命令列表及其解释。

小结

在本章中，我们学习了运行 Meteor 需要什么，如何创建 Meteor 应用，以及构建过程是如何工作的。

我们知道 Meteor 的文件夹结构相当灵活，但也有一些特殊的文件夹，如client、server、lib文件夹，它们被加载在不同的位置和顺序。 我们还了解了如何添加包以及如何使用 Meteor 命令行工具。

如果你想更深入地了解我们目前所学到的内容，可以看看 Meteor 文件的以下部分:

你可以在https://www.packtpub.com/books/content/support/17713或在 GitHub 上https://github.com/frozeman/book-building-single-page-web-apps-with-meteor/tree/chapter1找到本章的代码示例。

现在，我们已经建立了项目的基本文件夹结构，我们准备开始 Meteor 模板的有趣部分。*

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/1159.html