Meteor 創(chuàng)建 Meteor Package

創(chuàng)建 Meteor Package

我們在報告錯誤的工作中已經(jīng)創(chuàng)建了可重復(fù)使用的模式，為什么不把它打包讓 Meteor 社區(qū)的其他人都可使用呢？

為了開始，我們需要一個 Meteor 開發(fā)者賬號。你可以從 meteor.com 申請，但是很有可能當(dāng)你注冊這本書的時候已經(jīng)得到了。不管哪種情況，你應(yīng)該搞清楚你的用戶名是什么，因為我們會在本章中大量使用它。

在本章中我們使用用戶名 tmeasday，當(dāng)然你也可以換成你自己的。

首先我們需要創(chuàng)建一個結(jié)構(gòu)來存放新的包。使用命令 meteor create --package tmeasday:errors 來完成。需要注意的是 Meteor 已經(jīng)創(chuàng)建了一個名為 packages/tmeasday:errors/ 的文件夾和一些文件。我們從編輯 package.js 開始，這文件會告訴 Meteor 如果使用這個包，有什么對象或函數(shù)要導(dǎo)出。

Package.describe({
  name: "tmeasday:errors",
  summary: "A pattern to display application errors to the user",
  version: "1.0.0"
});

Package.onUse(function (api, where) {
  api.versionsFrom('0.9.0');

  api.use(['minimongo', 'mongo-livedata', 'templating'], 'client');

  api.addFiles(['errors.js', 'errors_list.html', 'errors_list.js'], 'client');

  if (api.export) 
    api.export('Errors');
});

當(dāng)開發(fā)現(xiàn)實使用的 package 時，非常好的習(xí)慣就是在 git 部分的 Package.describe 代碼塊中，填寫你代碼庫的 Git URL（比如，https://github.com/tmeasday/meteor-errors.git）。這樣的話，用戶可以瀏覽源代碼，并且（假設(shè)你使用 GitHub）你的 package 的 readme 會顯示在 Atomsphere 上。

讓我們添加 3 個文件到 package 中。（我們可以刪除 Meteor 自動添加的模板）我們可以從 Microscope 中 pull 這些文件而不用做太多修改，除了一些合適的命名和稍微清晰的 API：

Errors = {
  // Local (client-only) collection
  collection: new Mongo.Collection(null),

  throw: function(message) {
    Errors.collection.insert({message: message, seen: false})
  }
};

<template name="meteorErrors">
  <div class="errors">
    {{#each errors}}
      {{> meteorError}}
    {{/each}}
  </div>
</template>

<template name="meteorError">
  <div class="alert alert-danger" role="alert">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    {{message}}
  </div>
</template>

Template.meteorErrors.helpers({
  errors: function() {
    return Errors.collection.find();
  }
});

Template.meteorError.rendered = function() {
  var error = this.data;
  Meteor.setTimeout(function () {
    Errors.collection.remove(error._id);
  }, 3000);
};

在 Microscope 中測試 package

現(xiàn)在我們需要對 Microscope 做本地測試，以確保代碼工作正確。為了鏈接包到項目，我們用命令 meteor add tmeasday:errors。然后，需要刪除已經(jīng)變得多余的現(xiàn)有文件：

rm client/helpers/errors.js
rm client/templates/includes/errors.html
rm client/templates/includes/errors.js

我們需要做的另一件事情是做一些小的更新，使用正確的 API：

  {{> header}}
  {{> meteorErrors}}

Meteor.call('postInsert', post, function(error, result) {
  if (error) {
    // display the error to the user
    Errors.throw(error.reason);

Posts.update(currentPostId, {$set: postProperties}, function(error) {
  if (error) {
    // display the error to the user
    Errors.throw(error.reason);

一旦這些修改完成，我們就可恢復(fù)原來分包前的行為了。

寫測試

開發(fā)包的第一個步驟是在一個應(yīng)用程序中測試它，但接下來就是寫一個測試套件，正確的測試包的行為。Meteor 本身自帶 Tinytest（內(nèi)置的包測試儀），它可以很容易地運行測試套件，以便與他人分享包時確保正確。

讓我們創(chuàng)建一個測試文件，使用 Tinytest 來運行一些對新的包測試：

Tinytest.add("Errors - collection", function(test) {
  test.equal(Errors.collection.find({}).count(), 0);

  Errors.throw('A new error!');
  test.equal(Errors.collection.find({}).count(), 1);

  Errors.collection.remove({});
});

Tinytest.addAsync("Errors - template", function(test, done) {  
  Errors.throw('A new error!');
  test.equal(Errors.collection.find({}).count(), 1);

  // render the template
  UI.insert(UI.render(Template.meteorErrors), document.body);

  Meteor.setTimeout(function() {
    test.equal(Errors.collection.find({}).count(), 0);
    done();
  }, 3500);
});

在這些測試中，我們檢查基本的 Meteor.Errors 的功能是否工作，以及再次確認(rèn)該模板中的 rendered 代碼是否仍在工作。

我們不會在這里寫 Meteor 包測試的所有細(xì)節(jié)（而且 API 尚未最終確定，很有可能會有變化），但希望它是在一定程度上自我解釋其工作原理。

使用下面的代碼告訴 Meteor 如何在 package.js 中運行測試：

Package.onTest(function(api) {
  api.use('tmeasday:errors', 'client');
  api.use(['tinytest', 'test-helpers'], 'client');  

  api.addFiles('errors_tests.js', 'client');
});

然后我們就可以運行測試：

meteor test-packages tmeasday:errors

發(fā)布 package

現(xiàn)在我們要發(fā)布這個包，把它推送到 Meteor package 服務(wù)器，在 Atmopshere 中顯示出來，讓全世界的人都可使用。

幸運的是這很容易。我們只是 cd 到包的目錄，運行命令 meteor publish --create：

cd packages/tmeasday:errors
meteor publish --create

既然包已經(jīng)發(fā)布，我們可以從項目中刪除它，然后直接從 Atmopshere 重新添加它：

rm -r packages/tmeasday:errors
meteor add tmeasday:errors

現(xiàn)在我們應(yīng)該看到 Meteor 第一次下載了我們的 package。很棒！

和往常的附錄章節(jié)一樣，確保先恢復(fù)你所做的改動，然后再進(jìn)行下一章（或者在閱讀本書其他章節(jié)時，考慮你所做的改動。）