Meteor 創(chuàng)建 Meteor Package

創(chuàng)建 Meteor Package

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

為了開(kāi)始，我們需要一個(gè) Meteor 開(kāi)發(fā)者賬號(hào)。你可以從 meteor.com 申請(qǐng)，但是很有可能當(dāng)你注冊(cè)這本書(shū)的時(shí)候已經(jīng)得到了。不管哪種情況，你應(yīng)該搞清楚你的用戶名是什么，因?yàn)槲覀儠?huì)在本章中大量使用它。

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

首先我們需要?jiǎng)?chuàng)建一個(gè)結(jié)構(gòu)來(lái)存放新的包。使用命令 meteor create --package tmeasday:errors 來(lái)完成。需要注意的是 Meteor 已經(jīng)創(chuàng)建了一個(gè)名為 packages/tmeasday:errors/ 的文件夾和一些文件。我們從編輯 package.js 開(kāi)始，這文件會(huì)告訴 Meteor 如果使用這個(gè)包，有什么對(duì)象或函數(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)開(kāi)發(fā)現(xiàn)實(shí)使用的 package 時(shí)，非常好的習(xí)慣就是在 git 部分的 Package.describe 代碼塊中，填寫(xiě)你代碼庫(kù)的 Git URL（比如，https://github.com/tmeasday/meteor-errors.git）。這樣的話，用戶可以瀏覽源代碼，并且（假設(shè)你使用 GitHub）你的 package 的 readme 會(huì)顯示在 Atomsphere 上。

讓我們添加 3 個(gè)文件到 package 中。（我們可以刪除 Meteor 自動(dòng)添加的模板）我們可以從 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 中測(cè)試 package

現(xiàn)在我們需要對(duì) Microscope 做本地測(cè)試，以確保代碼工作正確。為了鏈接包到項(xiàng)目，我們用命令 meteor add tmeasday:errors。然后，需要?jiǎng)h除已經(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ù)原來(lái)分包前的行為了。

寫(xiě)測(cè)試

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

讓我們創(chuàng)建一個(gè)測(cè)試文件，使用 Tinytest 來(lái)運(yùn)行一些對(duì)新的包測(cè)試：

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);
});

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

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

使用下面的代碼告訴 Meteor 如何在 package.js 中運(yùn)行測(cè)試：

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

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

然后我們就可以運(yùn)行測(cè)試：

meteor test-packages tmeasday:errors

發(fā)布 package

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

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

cd packages/tmeasday:errors
meteor publish --create

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

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

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

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