-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy path09s-creating-a-meteor-package.md.erb
241 lines (189 loc) · 8.75 KB
/
09s-creating-a-meteor-package.md.erb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
---
title: Meteorパッケージの作成
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
version: 1.7
---
私たちは、エラーが動作して再利用可能なパターンを構築しましたので、
スマートパッケージにそれをパッケージ化し、
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" %>
実世界の使用のためにパッケージを開発するとき、
あなたレポジトリのGitのURLで`Package.describe`ブロックの`git`セクションを埋めるのは
良い練習になります。(例えば`https://github.com/tmeasday/meteor-errors.git`)
ユーザーがソースコードを読むことができます、そして、(あなたがGitHubを使っているなら)
AtmosphereにあなたのパッケージのReadmeが表示されます。
パッケージに3つのファイルを追加してみましょう。私たちは、いくつかの適切な名前空間と
少しのクリーナーAPIを除きあまり変化せずにMicroscopeからこれらのファイルを引き抜くことができます。
(Meteor配下のコードを削除し共通化できるということです):
~~~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でパッケージをテスト
今、私たちは、変更されたコードが動作することを確認するために、
Microscopeを使用してローカルにテストします。
私たちのプロジェクトにパッケージをリンクするために、我々は`meteor add tmeasday:errors`を実行します。
その後、新しいパッケージにより冗長化されてきた既存のファイルを削除する必要があります。
~~~bash
rm client/helpers/errors.js
rm client/templates/includes/errors.html
rm client/templates/includes/errors.js
~~~
<%= caption "removing old files on the bash console" %>
もう一つ行う事は適切なAPIを使用するためにいくつかのマイナーなアップデートをすることです:
~~~html
{{> header}}
{{> meteorErrors}}
~~~
<%= caption "client/templates/application/layout.html" %>
~~~js
Meteor.call('postInsert', post, function(error, id) {
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", "Created basic errors package and linked it in." %>
これらの変更が行われた後、私たちは私たちのオリジナルのプレパッケージの振る舞いが戻ってるはずです。
### テストを書く
パッケージを開発する際の最初のステップで、アプリケーションに対してテストしてますが、
次は正常にパッケージの動作をテストするテストスイートを書きます。
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`コードがまだ機能している事をダブルチェックします。
我々は、(APIがまだ確定しておらず改変の可能性があるため)ここでMeteorパッケージテストを書く詳細をカバーしていませんが、
うまくいけばそれがどのように動作するか、かなり自明にできます。
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", "Added tests to the package." %>
以下のようにテストを動かします。
~~~bash
meteor test-packages tmeasday:errors
~~~
<%= caption "Terminal" %>
<%= screenshot "s7-1", "Passing all tests" %>
### パッケージの置き換え
今、パッケージをリリースし、世界でそれを利用できるようにします。私たちは、
Meteorのパッケージサーバーにそれをプッシュし、Atmopshereから取得できるようにします。
幸いなことに、それは非常に簡単です。`cd`で、パッケージのディレクトリに入り、
`meteor publish --create`を実行します。:
~~~bash
cd packages/tmeasday:errors
meteor publish --create
~~~
<%= caption "Terminal" %>
今すぐパッケージがリリースされていることを、プロジェクトから一旦削除して、再度追加し、
確認することができます。
~~~bash
rm -r packages/errors
meteor add tmeasday:errors
~~~
<%= caption "Terminal (run from the top level of the app)" %>
<%= scommit "9-5-4", "Removed package from development tree." %>
今、私たちはMeteorが初めて私達のパッケージをダウンロードし表示されるはずです。よくやった!