9b-創建Meteor包 · Meteor

--- title: 創建 Meteor Package slug: creating-a-meteor-package date: 0009/01/02 number: 9.5 points: 10 sidebar: true photoUrl: http://www.flickr.com/photos/rxb/7779426142/ photoAuthor: Richard contents: 寫一個應用里的內部包。|給你的包添加測試。|發布你的包到Atmosphere。 paragraphs: 22 --- 我們在報告錯誤的工作中已經創建了可重復使用的模式，為什么不把它打包讓 Meteor 社區的其他人都可使用呢？為了開始，我們需要一個 Meteor 開發者賬號。你可以從 [meteor.com](meteor.com) 申請，但是很有可能當你注冊這本書的時候已經得到了。不管哪種情況，你應該搞清楚你的用戶名是什么，因為我們會在本章中大量使用它。在本章中我們使用用戶名 `tmeasday`，當然你也可以換成你自己的。首先我們需要創建一個結構來存放新的包。使用命令 `meteor create --package tmeasday:errors` 來完成。需要注意的是 Meteor 已經創建了一個名為 `packages/tmeasday:errors/` 的文件夾和一些文件。我們從編輯 `package.js` 開始，這文件會告訴 Meteor 如果使用這個包，有什么對象或函數要導出。 ~~~js 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'); }); ~~~ <%= caption "packages/tmeasday:errors/package.js" %> 當開發現實使用的 package 時，非常好的習慣就是在 `git` 部分的 `Package.describe` 代碼塊中，填寫你代碼庫的 Git URL（比如，`https://github.com/tmeasday/meteor-errors.git`）。這樣的話，用戶可以瀏覽源代碼，并且（假設你使用 GitHub）你的 package 的 readme 會顯示在 Atomsphere 上。讓我們添加 3 個文件到 package 中。（我們可以刪除 Meteor 自動添加的模板）我們可以從 Microscope 中 pull 這些文件而不用做太多修改，除了一些合適的命名和稍微清晰的 API： ~~~js Errors = { // Local (client-only) collection collection: new Mongo.Collection(null), throw: function(message) { Errors.collection.insert({message: message, seen: false}) } }; ~~~ <%= caption "packages/tmeasday:errors/errors.js" %> ~~~html <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">×</button> {{message}} </div> </template> ~~~ <%= caption "packages/tmeasday:errors/errors_list.html" %> ~~~js 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); }; ~~~ <%= caption "packages/tmeasday:errors/errors_list.js" %> ### 在 Microscope 中測試 package 現在我們需要對 Microscope 做本地測試，以確保代碼工作正確。為了鏈接包到項目，我們用命令 `meteor add tmeasday:errors`。然后，需要刪除已經變得多余的現有文件： ~~~bash rm client/helpers/errors.js rm client/templates/includes/errors.html rm client/templates/includes/errors.js ~~~ <%= caption "在 bash console 上刪除舊文件" %> 我們需要做的另一件事情是做一些小的更新，使用正確的 API： ~~~html {{> header}} {{> meteorErrors}} ~~~ <%= caption "client/templates/application/layout.html" %> ~~~js Meteor.call('postInsert', post, function(error, result) { if (error) { // display the error to the user Errors.throw(error.reason); ~~~ <%= caption "client/templates/posts/post_submit.js" %> ~~~js Posts.update(currentPostId, {$set: postProperties}, function(error) { if (error) { // display the error to the user Errors.throw(error.reason); ~~~ <%= caption "client/templates/posts/post_edit.js" %> <%= scommit "9-5-1", "創建和鏈接基本的 errors package。" %> 一旦這些修改完成，我們就可恢復原來分包前的行為了。 ### 寫測試開發包的第一個步驟是在一個應用程序中測試它，但接下來就是寫一個測試套件，正確的測試包的行為。Meteor 本身自帶 Tinytest（內置的包測試儀），它可以很容易地運行測試套件，以便與他人分享包時確保正確。讓我們創建一個測試文件，使用 Tinytest 來運行一些對新的包測試： ~~~js 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); }); ~~~ <%= caption "packages/tmeasday:errors/errors_tests.js" %> 在這些測試中，我們檢查基本的 `Meteor.Errors` 的功能是否工作，以及再次確認該模板中的 `rendered` 代碼是否仍在工作。我們不會在這里寫 Meteor 包測試的所有細節（而且 API 尚未最終確定，很有可能會有變化），但希望它是在一定程度上自我解釋其工作原理。使用下面的代碼告訴 Meteor 如何在 `package.js` 中運行測試： ~~~js Package.onTest(function(api) { api.use('tmeasday:errors', 'client'); api.use(['tinytest', 'test-helpers'], 'client'); api.addFiles('errors_tests.js', 'client'); }); ~~~ <%= caption "packages/tmeasday:errors/package.js" %> <%= scommit "9-5-2", "為 package 添加測試。" %> 然后我們就可以運行測試： ~~~bash meteor test-packages tmeasday:errors ~~~ <%= caption "終端 Terminal" %> <%= screenshot "s7-1", "通過所有測試" %> ### 發布 package 現在我們要發布這個包，把它推送到 Meteor package 服務器，在 Atmosphere 中顯示出來，讓全世界的人都可使用。幸運的是這很容易。我們只是 `cd` 到包的目錄，運行命令 `meteor publish --create`： ~~~bash cd packages/tmeasday:errors meteor publish --create ~~~ <%= caption "終端 Terminal" %> 既然包已經發布，我們可以從項目中刪除它，然后直接從 Atmosphere 重新添加它： ~~~bash rm -r packages/tmeasday:errors meteor add tmeasday:errors ~~~ <%= caption "終端 Terminal（在應用最高級別運行）" %> <%= scommit "9-5-4", "從開發 tree 中刪除 package。" %> 現在我們應該看到 Meteor 第一次下載了我們的 package。很棒！和往常的附錄章節一樣，確保先恢復你所做的改動，然后再進行下一章（或者在閱讀本書其他章節時，考慮你所做的改動。）