1
1
# ソースコードの構造
2
2
3
- ## ステートフルなシングルトンは避ける
3
+ ## ステートフルなシングルトンの回避
4
4
5
5
クライアントのみのコードを書くとき、私たちはコードが毎回新しいコンテキストで評価されるという事実に慣れています。しかし、 Node.js サーバーは長時間実行されるプロセスです。私たちのコードがプロセスに要求されるとき、それは一度評価されメモリにとどまります。つまりシングルトンのオブジェクトを作成したとき、それは全ての受信リクエスト間でシェアされると言うことです。
6
6
7
7
基本的な例としては、私たちは ** リクエストごとに新しいルート Vue インスタンスを作成します** 。それは各ユーザがそれぞれのブラウザでアプリケーションの新しいインスタンスを使用することに似ています。もし私たちが複数のリクエストをまたいでインスタンスを共有すると、それは容易にクロスリクエスト状態の汚染につながるでしょう。
8
8
9
- そのため、直接アプリケーションのインスタンスを作成するのではなく、各リクエストで繰り返し実行される新しいアプリケーションのインスタンスを作成するファクトリ関数を公開する必要があります:
9
+ そのため、直接アプリケーションのインスタンスを作成するのではなく、各リクエストで繰り返し実行される新しいアプリケーションのインスタンスを作成するファクトリ関数を公開する必要があります:
10
10
11
11
``` js
12
12
// app.js
@@ -21,7 +21,7 @@ module.exports = function createApp (context) {
21
21
}
22
22
```
23
23
24
- そして私たちのサーバーコードはこうなります:
24
+ そして私たちのサーバーコードはこうなります:
25
25
26
26
``` js
27
27
// server.js
@@ -30,13 +30,13 @@ server.get('*', (req, res) => {
30
30
const context = { url: req .url }
31
31
const app = createApp (context)
32
32
renderer .renderToString (app, (err , html ) => {
33
- // エラーをハンドリングします
33
+ // エラーを処理 ...
34
34
res .end (html)
35
35
})
36
36
})
37
37
```
38
38
39
- 同じルールがルータ、ストア、イベントバスのインスタンスに適用されます。モジュールから直接エクスポートしアプリケーションにインポートするのでは無く、 ` createApp ` で新しいインスタンスを作成し、ルート Vue インスタンスから注入する必要があります。
39
+ 同じルールがルータ、ストア、イベントバスのインスタンスに適用されます。モジュールから直接エクスポートしアプリケーションにインポートするのでは無く、 ` createApp ` で新しいインスタンスを作成し、ルート (root) Vue インスタンスから注入する必要があります。
40
40
41
41
> ` { runInNewContext: true } ` でバンドルレンダラを使用するとき、その制約を取り除くことが可能です。しかし各リクエストに対して新しい VM コンテキストを作成する必要があるため、いくらか重大なパフォーマンスコストがかかります。
42
42
@@ -53,11 +53,11 @@ server.get('*', (req, res) => {
53
53
54
54
セットアップの詳細については次のセクションで議論されます。今のところ、ビルドのセットアップが分かっていると仮定すると、webpack を有効にして Vue アプリケーションコードを書くことが可能になっています。
55
55
56
- ## Webpackによるコード構造
56
+ ## webpackによるコード構造
57
57
58
58
webpack を使用してサーバーとクライアントのアプリケーションを処理しているので、ソースコードの大部分はユニバーサルに書かれており、すべての webpack の機能にアクセスできます。 同時に、ユニバーサルなコードを書くときに留意すべき[ いくつかあります。] ( ./universal.md )
59
59
60
- シンプルなプロジェクトは以下のようになります:
60
+ シンプルなプロジェクトは以下のようになります:
61
61
62
62
``` bash
63
63
src
78
78
``` js
79
79
import Vue from ' vue'
80
80
import App from ' ./App.vue'
81
- // 新しいアプリケーション・ ルータ・ ストアを作成するためのファクトリ関数をエクスポートします
81
+ // 新しいアプリケーション、 ルータ、 ストアを作成するためのファクトリ関数をエクスポートします
82
82
// インスタンス
83
83
export function createApp () {
84
84
const app = new Vue ({
85
- // ルートインスタンスは単にAppコンポーネントをレンダリングします
85
+ // ルートインスタンスは単に App コンポーネントを描画します
86
86
render : h => h (App)
87
87
})
88
88
return { app }
@@ -103,7 +103,7 @@ app.$mount('#app')
103
103
104
104
### ` entry-server.js ` :
105
105
106
- サーバーエントリはレンダリングごとに繰り返し呼び出すことができる関数をデフォルトでエクスポートします 。現時点では、アプリケーションインスタンスを作成して返す以外のことはほとんど行いませんが、後でサーバーサイドのルートマッチングとデータプリフェッチロジックを実行します。
106
+ サーバーエントリは描画ごとに繰り返し呼び出すことができる関数をデフォルトでエクスポートします 。現時点では、アプリケーションインスタンスを作成して返す以外のことはほとんど行いませんが、後でサーバーサイドのルートマッチングとデータプリフェッチロジックを実行します。
107
107
108
108
``` js
109
109
import { createApp } from ' ./app'
0 commit comments