4.2 万 Star！开发 Web 和移动端应用的全栈平台

【导语】：Meteor 是一个用 JS 开发现代 Web 应用程序的平台。它是开源的，在 GitHub 上有 4.2 万 Star。

Meteor 是什么?

官方文档是这样描述 Meteor 的：Meteor 是一个用于开发 Web 和移动端应用的全栈 JavaScript 平台。它包含一系列用于实现客户端实时响应的技术和与之配合的一个构建工具，以及来自 Node.js 和常规 JavaScript 社区的精选软件包。

简而言之，用户可以便捷的使用 Meteor 平台搭建一套从前端到移动端再到后端的全栈实时响应式系统，且具有以下优点：

• 用户在前端、移动端和后端等不同开发环境中可以仅使用 JavaScript 一种语言 进行开发。
• Meteor 中由后端主动传送数据给前端渲染，而不是等前端 HTML 发起请求，称之为 数据连接线。
• Meteor 关注 JavaScript 生态系统, 为用户带来 JavaScript 活跃社区中最佳的部分。
• Meteor 提供 全栈式的响应支持, 使得用户用最小的开发代价让页面反应真实的数据。

GitHub 链接：

https://github.com/meteor/meteor

快速上手

Meteor 支持 MacOS、Windows 和 Linux 平台。Windows上，首先安装 Chocolatey，然后使用管理员权限运行以下命令:

`choco install meteor
`

MacOS 或 Linux 平台直接从终端中安装 Meteor 最新发布版本:

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

由于网络问题，国内安装时请注意启用代理

Windows 安装程序支持 Win 7，Win 8.1，Windows Server 2008 和 Windows Server2012。命令行安装程序支持 MacOS 10.7（Lion）及更高版本，以及 x86 和 x86\_64 体系结构上的 Linux。Meteor 安装好后创建一个项目:

meteor create try-meteor  

本地运行:

cd try-meteor  
meteor  
# Meteor server running on: http://localhost:3000/  

项目默认启动3000端口，如果3000端口被占用，可以通过添加 --port <指定的端口> 参数进行配置，成功运行后截图如下：

项目目录如下：

client/main.js        # 浏览器端JS脚本  
client/main.html      # 初始化HTML  
client/main.css       # 初始化CSS  
server/main.js        # 服务端启动脚本  
test/main.js          # 测试脚本  
package.json          # npm包管理  
package-lock.json     # npm依赖描述  
node_modules/         # node_modules  
.meteor/              # meteor内部架构文件  
.gitignore            # .gitignore  

前端比较简单，这里好奇一下 Meteor 后端的启动代码，打开后发现及其简洁：

import { Meteor } from 'meteor/meteor';  
  
Meteor.startup(() => {  
  // code to run on server at startup  
});  

可以看到 Meteor 针对后端启动代码进行了全方位的封装，使用起来非常简单，具体封装这里不详细展开，有兴趣可以查看 官方网站 和 Meteor github开源代码 。

下面我们尝试通过 Meteor 创建一个简单的 Todo 项目 simple-todos ，从项目中入门 Meteor 的使用。

Todo 项目入门体验

创建项目

首先按照 快速上手 中命令创建项目 simple-todos：

meteor create simple-todos  
  
cd simple-todos  
meteor  

修改前端展示模板

首先, 从 HTML 入口文件中移除掉初始化项目代码 (仅留下  标签):

在 simple-todos 目录中创建 imports 文件夹，然后在 imports 中创建多个文件，如下：

  
  
  
      
      
  
        
Todo List
  
      
  
  
      
  
        {{#each tasks}}  
          {{> task}}  
        {{/each}}  
      
  
    

          

{{text}}

  

// imports/ui/body.js  
  
import { Template } from 'meteor/templating';  
  
import './body.html';  
  
Template.body.helpers({  
  tasks: [  
    { text: 'This is task 1' },  
    { text: 'This is task 2' },  
    { text: 'This is task 3' },  
  ],  
});  

在前端的 JavaScript 入口文件 client/main.js 中, 移除所有代码并且引用 imports/ui/body.js:

// client/main.js  
  
import '../imports/ui/body.js';  

import 的工作原理和项目代码组织可以参考官网 项目结构组织 .此时，我们浏览器中的展示就变成了:

Todo List

• This is task 1
• This is task 2
• This is task 3

接下来我们了解一下上面代码都做了什么：

HTML 模板渲染

Meteor 在转化 HTML 文件时会识别三个标签: \, \, 和 \ // 新增代码 Template.body.events({  'submit .new-task'(event) {   // 阻止浏览器自动提交   event.preventDefault();   // 从元素中获取值   const target = event.target;   const text = target.text.value;   // 像集合中插入任务   Tasks.insert({    text,    createdAt: new Date(), // current time   });   // 输入完成后清除表单   target.text.value = '';  }, });

在浏览器上打开一个新的客户端窗口，在其中一个输入任务，你会发现所有客户端都同时更新。

点击删除任务

修改 task 模板，新建一个 checkbox 和删除按钮。

  
  
  
      
      ×  
  
        
  
      {{text}}  
      
    

删除之前的 task 模板：打开 imports/ui/body.html，删掉  部分。在新增的页面元素中添加监听事件：

// imports/ui/task.js  
  
import { Template } from 'meteor/templating';  
  
import { Tasks } from '../api/tasks.js';  
  
import './task.html';  
  
Template.task.events({  
  'click .toggle-checked'() {  
    // 取 checkbox 相反值  
    Tasks.update(this._id, {  
      $set: { checked: ! this.checked },  
    });  
  },  
  'click .delete'() {  
    Tasks.remove(this._id);  
  },  
});  

同样的，body 模板中也需要更新：

// imports/ui/body.js  
  
import { Tasks } from '../api/tasks.js';  
  
import './task.js';  
import './body.html';  

上述修改后，点击就可以完成修改或删除事件。

在安卓或 iOS 上运行

Meteor 目前还不支持 windows 构建移动端，windows 用户可以跳过，由于生产环境限制文章无法提供截图，请自行尝试。

在 iOS 模拟器上运行

在项目根目录运行：

meteor install-sdk ios  

完成后运行：

meteor add-platform ios  
meteor run ios  

完成后会发现 iOS 模拟器上就能弹出应用。

在安卓模拟器上运行

在根目录输入：

meteor install-sdk android  

然后输入：

meteor add-platform android  

同意所有的 license 声明，然后输入

meteor run android  

完成后安卓端也能顺利运行。

Meteor 学习资源

以上为 Meteor 简单入门体验，如果需要深入了解 Meteor 特性，可以参考以下资源。

1. 官方入门指导 。
2. 官方推荐通过 Stack Overflow 提出技术性问题，注意带上 meteor 标签。
3. 访问 Meteor 论坛 。
4. Meteor 核心 API 文档 Meteor docs .
5. Atmosphere ，Meteor 的非官方代码包库。
6. Awesome Meteor 是社区总结的一系列 包 和 资源.

开源前哨 日常分享热门、有趣和实用的开源项目。参与维护 10万+ Star 的开源技术资源库，包括：Python、Java、C/C++、Go、JS、CSS、Node.js、PHP、.NET 等。