Skip to content

Commit 6c1e53f

Browse files
kazuponkazupon
authored
update ja docs (#1182)
* docs(ja): update valid option ref: 069bc31 * docs(ja): add hot reload docs ref: 14921e4 * docs(ja): translate hot reload docs * docs(ja): Webpack -> webpack * docs(ja): update hot reload and scoped css docs ref: d89bd3c * docs(ja): translate hot reload and scoped css section * docs(ja): http -> https ref: c39ba70 * docs(ja): add cacheBusting option * docs(ja): translate cacheBusting option * docs(ja): update workflow/testing0-with-mock section ref: 21809a0 * docs(ja): update postcss related docs ref: 2db8c0a * docs(ja): translate postcss related docs * docs(ja): remove cacheBusting option ref: 26cad3d * docs(ja): update configrations/asset-url docs ref: 781df8c * docs(ja): translate configrations/asset-url docs * docs(ja): remove webpack 1 reference, refer new cli ref: 7fb1cd8 * docs(ja): remove workflow/testing-with-mocks docs ref: 611fda8 * docs(ja): add notice to esmodule option ref: 96635ea * docs(ja): translate esmodule option doc * docs(ja): udpate configrations/asset-url doc * docs(ja): add new options ref: a945fca * docs(ja): add hotRealod option (leak option ... orz) * docs(ja): adjust option doc layouting * docs(ja): translate otpions * docs(ja): fix review comments
1 parent c5b1aee commit 6c1e53f

File tree

16 files changed

+222
-400
lines changed

16 files changed

+222
-400
lines changed

‎docs/ja/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@
2020

2121
すでに webpack に精通している場合は、次の説明を省略してもかまいません。しかし、webpack を初めて使う人のために、ここで簡単な紹介を行います。
2222

23-
[webpack](http://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。
23+
[webpack](https://webpack.github.io/) とはモジュールのバンドラーです。それぞれのファイルをモジュールとして扱い、それらの間の依存関係を解決し、デプロイの準備が整った静的アセットにバンドルします。
2424

25-
![webpack](http://webpack.github.io/assets/what-is-webpack.png)
25+
![webpack](https://webpack.github.io/assets/what-is-webpack.png)
2626

2727
基本的な例として、CommonJS モジュールが多数あるとします。これらはブラウザで直接実行できません。なのでそれらを `<script>` タグを介して読み込むことのできる単一のファイルに "バンドル" する必要があります。webpack は `require()` での依存性解決と実行を行うことが出来ます。
2828

‎docs/ja/SUMMARY.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,14 @@
1818
- [プロダクションビルド](workflow/production.md)
1919
- [リント](workflow/linting.md)
2020
- [テスト](workflow/testing.md)
21-
- [モックを使用したテスト](workflow/testing-with-mocks.md)
2221
- [オプションリファレンス](options.md)
2322
- [loaders](options.md#loaders)
2423
- [preLoaders](options.md#preloaders)
2524
- [postLoaders](options.md#postloaders)
2625
- [postcss](options.md#postcss)
2726
- [postcss.config](options.md#postcssconfig)
27+
- [postcss.useConfigFile](options.md#postcssuseconfigfile)
28+
- [postcss.cascade](options.md#postcsscascade)
2829
- [cssSourceMap](options.md#csssourcemap)
2930
- [esModule](options.md#esmodule)
3031
- [preserveWhitespace](options.md#preservewhitespace)
@@ -33,4 +34,4 @@
3334
- [transformToRequire](options.md#transformtorequire)
3435
- [buble](options.md#buble)
3536
- [extractCSS](options.md#extractcss)
36-
- [optimizeSSR](options.md#optimizessr)
37+
- [optimizeSSR](options.md#optimizessr)

‎docs/ja/configurations/advanced.md

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,6 @@
1010

1111
> メモ: `preLoaders` と `postLoaders` は 10.3.0 以降でのみサポートされます
1212
13-
### webpack 2.x
14-
1513
``` js
1614
module.exports = {
1715
// 他のオプション
@@ -57,27 +55,4 @@ module.exports = {
5755
}
5856
```
5957

60-
### webpack 1.x
61-
62-
``` js
63-
// webpack.config.js
64-
module.exports = {
65-
// ほかのオプション
66-
module: {
67-
loaders: [
68-
{
69-
test: /\.vue$/,
70-
loader: 'vue'
71-
}
72-
]
73-
},
74-
// `vue-loader` の設定
75-
vue: {
76-
loaders: {
77-
// 上記の設定と同じ
78-
}
79-
}
80-
}
81-
```
82-
8358
高度な loader の設定のより実用的な使用方法は、[CSS を単一のファイルに抽出する](./expression-css.md)にあります。

‎docs/ja/configurations/asset-url.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,27 @@
1313
``` js
1414
createElement('img', { attrs: { src: require('../image.png') }})
1515
```
16+
17+
### 変換ルール
18+
19+
- URL が絶対パス (例: `./images/foo.png`) の場合、そのままの状態で維持されます。
20+
21+
- URL が `.` による開始である場合、相対的なモジュール要求として解釈され、ファイルシステムのフォルダ構造に基いて解決されます。
22+
23+
- URL が `~` による開始である場合、モジュール要求として解釈された後、何もしません。これは、Node モジュール内部でアセットを参照することもできます:
24+
25+
``` html
26+
<img src="~some-npm-package/foo.png">
27+
```
28+
29+
- (13.7.0以降) URL が `@` による開始である場合、モジュール要求として解釈されます。これは、webpack 設定ファイルに `@` のエイリアスがある場合は、便利です。デフォルトでは、`vue-cli` によって作成されたプロジェクトでは `./src` を指します。
30+
31+
### 関連ローダー
32+
1633
もちろん `.png` ファイルは JavaScript のファイルではありません。[file-loader](https://github.com/webpack/file-loader) または [url-loader](https://github.com/webpack/url-loader) を使用して webpack を設定する必要があります。`vue-cli` でスキャフォールドされたプロジェクトでは同じような設定がなされています。
1734

35+
### なぜなのか
36+
1837
利点の全ては次の通りです:
1938

2039
1. `file-loader` はアセットファイルのコピー先や配置先を制定したり、バージョンハッシュを利用してキャッシングを改善する方法を指定する事が出来ます。さらに、これは、単に**あなたの `* .vue` ファイルの隣にイメージを置くことができ、配備するURLを心配するのではなくフォルダ構造に基づいて相対パスを使用する**ことを意味します。

‎docs/ja/configurations/custom-blocks.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ comp-a h2 {
4141
#### webpack.config.js
4242

4343
``` js
44-
// webpack 2.x
4544
var ExtractTextPlugin = require("extract-text-webpack-plugin")
4645

4746
module.exports = {

‎docs/ja/configurations/extract-css.md

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,6 @@ module.exports = {
3939

4040
すべての Vue コンポーネントで処理されたすべての CSS を 1 つの CSS ファイルに抽出する例:
4141

42-
### webpack 2.x
43-
4442
``` js
4543
// webpack.config.js
4644
var ExtractTextPlugin = require("extract-text-webpack-plugin")
@@ -68,36 +66,3 @@ module.exports = {
6866
]
6967
}
7068
```
71-
72-
### webpack 1.x
73-
74-
``` bash
75-
npm install extract-text-webpack-plugin --save-dev
76-
```
77-
78-
``` js
79-
// webpack.config.js
80-
var ExtractTextPlugin = require("extract-text-webpack-plugin")
81-
82-
module.exports = {
83-
// 他の設定
84-
module: {
85-
loaders: [
86-
{
87-
test: /\.vue$/,
88-
loader: 'vue'
89-
},
90-
]
91-
},
92-
vue: {
93-
loaders: {
94-
css: ExtractTextPlugin.extract("css"),
95-
// <style lang="less">　または他の言語も含めることができます
96-
less: ExtractTextPlugin.extract("css!less")
97-
}
98-
},
99-
plugins: [
100-
new ExtractTextPlugin("style.css")
101-
]
102-
}
103-
```

‎docs/ja/features/css-modules.md

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -89,17 +89,6 @@ CSS モジュールは [css-loader](https://github.com/webpack/css-loader) に
8989
vue-loader の `cssModules`オプションを使って` css-loader`に追加のクエリオプションを提供することができます:
9090

9191
``` js
92-
// webpack 1
93-
vue: {
94-
cssModules: {
95-
// ローカルID名を上書きする
96-
localIdentName: '[path][name]---[local]---[hash:base64:5]',
97-
// キャメルケースを有効にする
98-
camelCase: true
99-
}
100-
}
101-
102-
// webpack 2
10392
module: {
10493
rules: [
10594
{

‎docs/ja/features/hot-reload.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,42 @@
44

55
![hot-reload](http://blog.evanyou.me/images/vue-hot.gif)
66

7+
## 状態維持ルール
8+
9+
- コンポーネントの `<template>` を編集するとき、編集されたコンポーネントのインスタンスは、そのまま再描画し、全て現在のプライベートな状態に維持します。これは、テンプレートが副作用を発生させない新しい描画関数にコンパイルされるため可能です。
10+
11+
- コンポーネントの `<script>` 部分を編集するとき、編集されたコンポーネントのインスタンスは破棄され、そのまま再作成されます。(アプリケーション内の他のコンポーネントの状態は維持されています。) これは、`<script>` が副作用を生むかもしれないライフサイクルフックを含むことができるため、一貫性のある動作を保証するためには再描画の代わりに"リロード"が必要です。これはまた、コンポーネントライフサイクルフック内のタイマーのようなグローバルな副作用に注意する必要があることを意味します。場合によっては、コンポーネントでグローバルな副作用が発生する場合は、フルページリロードの必要があるかもしれません。
12+
13+
- `<style>` ホットリロードは `vue-style-loader` を介して単独で動作するため、アプリケーションの状態に影響しません。
14+
15+
## Usage
16+
717
`vue-cli` を使ってプロジェクトをスキャホールドすると、ホットリロードはすぐに使えるようになります。
18+
19+
プロジェクトを手動で設定するときは、ホットリロードは、`webpack-dev-server --hot` によってプロジェクトを提供するとき、自動的に有効なります。
20+
21+
上級者は、`vue-loader` によって内部的に使用されいてる [vue-hot-reload-api](https://github.com/vuejs/vue-hot-reload-api) を確認することができます。
22+
23+
## ホットリロードの無効
24+
25+
ホットリロードは以下の状況を除いて常に有効です:
26+
27+
* webpack の `target` が `node` (SSR)
28+
* webpack ミニファイコード
29+
* `process.env.NODE_ENV === 'production'`
30+
31+
ホットリロードを明示的に無効にするためには、`hotReload: false` オプションを使用してください:
32+
33+
``` js
34+
module: {
35+
rules: [
36+
{
37+
test: /\.vue$/,
38+
loader: 'vue-loader',
39+
options: {
40+
hotReload: false // ホットリロードを無効
41+
}
42+
}
43+
]
44+
}
45+
```

‎docs/ja/features/postcss.md

Lines changed: 28 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -4,32 +4,30 @@
44

55
## 設定ファイルの使用
66

7-
バージョン 11.0 以降、 `vue-loader` は [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) でサポートされているものと同じ PostCss の設定ファイルのオートロードをサポートします:
7+
`vue-loader` は [`postcss-loader`](https://github.com/postcss/postcss-loader#usage) でサポートされているものと同じ PostCss の設定ファイルのオートロードをサポートします:
88

99
- `postcss.config.js`
1010
- `.postcssrc`
1111
- `package.json` 内の `postcss`
1212

1313
設定ファイルを使用すると `postcss-loader` で処理された通常の CSS ファイルと `*.vue` ファイル内の CSS で同じ設定を共有することができます。
1414

15-
## インラインオプション
15+
## `postcss-loader` の使用
1616

17-
あるいは、 `vue-loader` の `postcss` オプションを使用して `*.vue` ファイル用の PostCSS の設定を指定することが出来ます。
17+
`vue-loader` は内部的にはスタイルで PostCSS を扱うため、スタンドアロンの CSS ファイルに `postcss-loader` を適用する必要あります。プロジェクトに PostCSS 設定ファイルがある場合は、style ブロックに `lang="postcss"` を指定する必要はありません。
1818

19-
webpack 1.x の例:
19+
時々、ユーザーはシンタックスハイライトを目的のみに `lang="postcss"`を使用することもあります。13.6.0 から、以下の一般的な PostCSS 拡張 (`vue-loader` 自身の `loaders` オプションを介して)のためにローダーが明示的に指定されていない場合は、それらは `vue-loader` のデフォルト PostCSS 変換を単に追加します:
2020

21-
``` js
22-
// webpack.config.js
23-
module.exports = {
24-
// 他の設定
25-
vue: {
26-
// カスタムされた PostCSS プラグインを使用します
27-
postcss: [require('postcss-cssnext')()]
28-
}
29-
}
30-
```
21+
- `postcss`
22+
- `pcss`
23+
- `sugarss`
24+
- `sss`
25+
26+
## インラインオプション
27+
28+
あるいは、 `vue-loader` の `postcss` オプションを使用して `*.vue` ファイル用の PostCSS の設定を指定することが出来ます。
3129

32-
webpack 2.x の例:
30+
例:
3331

3432
``` js
3533
// webpack.config.js
@@ -61,7 +59,21 @@ module.exports = {
6159
postcss: {
6260
plugins: [...], // プラグインのリスト
6361
options: {
64-
parser: sugarss // sugarss パーサーを使用します
62+
parser: 'sugarss' // sugarss パーサーを使用します
6563
}
6664
}
6765
```
66+
67+
### 自動設定ファイルの読み込みを無効にする
68+
69+
`13.6.0 以降`では、`postcss.useConfigFile: false` を指定することによって自動 postcss 設定ファイルの読み込みが無効化されます:
70+
71+
``` js
72+
postcss: {
73+
useConfigFile: false,
74+
plugins: [/* ... */],
75+
options: {/* ... */}
76+
}
77+
```
78+
79+
これにより `*.vue` ファイル内の postcss 設定をインライン設定で完全に制御することができます。

‎docs/ja/features/scoped-css.md

Lines changed: 39 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
# スコープ付き CSS
22

3+
**再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。# スコープ付き CSS
4+
35
`scoped` 属性をもつ `<style>` タグを利用するとき、その CSS は現在のコンポーネントの要素にのみ適用されます。これは Shadow DOM のスタイルのカプセル化に似ています。いくつか注意点がありますが、polyfill は必要ありません。PostCSS を使用して以下を変換することによって実現しています:
46

57
``` html
@@ -28,40 +30,49 @@
2830
</template>
2931
```
3032

31-
#### 注意
33+
## 秘訣
34+
35+
### ローカルスタイルとグローバルスタイルの混在
36+
37+
同じコンポーネントでスコープ付き、そして非スコープ付きスタイル両方を含むことができます:
38+
39+
``` html
40+
<style>
41+
/* グローバルスタイル */
42+
</style>
3243

33-
1. 同じコンポーネント内にスコープで区切られてものとそうでないスタイルを含むことが出来ます：
44+
<style scoped>
45+
/* ローカルスタイル */
46+
</style>
47+
```
3448

35-
``` html
36-
<style>
37-
/* グローバルスタイル */
38-
</style>
49+
### 子コンポーネントのルート要素
3950

40-
<style scoped>
41-
/* ローカルスタイル */
42-
</style>
43-
```
51+
`scoped` によって、親コンポーネントのスタイルは子コンポーネントに漏れません。ただし、子コンポーネントのルートノードは親スコープの CSS と子スコープの CSS と両方によって影響を受けます。これは、設計上、親はレイアウトが目的で子のルート要素をスタイルすることができます。
4452

45-
2. 子コンポーネントのルートノードは親のスコープの CSS と子のスコープの CSS の両方の影響をうけます。
53+
### ディープセレクタ
54+
55+
`scoped` スタイルのセレクタを "deep" にしたい、つまり子コンポーネントに及ぼしたい場合は、`>>>` コンビネータを使用することができます:
56+
57+
``` html
58+
<style scoped>
59+
.a >>> .b { /* ... */ }
60+
</style>
61+
```
62+
63+
上記は以下にコンパイルされます:
64+
65+
``` css
66+
.a[data-v-f3f3eg9] .b { /* ... */ }
67+
```
4668

47-
3. パーシャルはスコープ付きスタイルの影響をうけません。
69+
SASS のようないくつかのプリプロセッサは、`>>>` を適切に解析できないかもしれません。そのようなケースでは `/deep/` コンビネータを代わりに使用することができます。それは、`>>>` のエイリアスで、全く同じような動作します。
4870

49-
4. **スコープされたスタイルは class の必要性を排除しません**。ブラウザが様々な CSS セレクタをレンダリングするため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](http://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
71+
### 動的に生成されるコンテンツ
5072

51-
5. **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。
73+
`v-html` によって作成された DOM コンテンツは、スコープ付きスタイルにの影響を受けませんが、ディープセレクタを使用してスタイルを設定することはできます。
5274

53-
6. `scoped` スタイルで入れ子のセレクタが必要なら、CSS に対して `>>>` オペレータを、そして `scss` に対しては `/deep/` を使用する必要があります:
75+
### 留意すること
5476

55-
``` html
56-
<style scoped>
57-
.a >>> .b {
58-
59-
}
60-
</style>
61-
62-
<style lang="scss" scoped>
63-
.a /deep/ .b {
64-
65-
}
66-
</style>
67-
```
77+
- **スコープ付きスタイルでは class は必要です。** ブラウザが様々な CSS セレクタを描画するため、`p { color: red }` はスコープされているとき何倍も遅くなります（すなわち属性セレクタと組み合わせた場合）。もし `.example { color: red }` のように class か id を使用するなら、パフォーマンスヒットは事実上なくなります。[この例](https://stevesouders.com/efws/css-selectors/csscreate.php)で違いをテストすることが出来ます。
78+
- **再帰されたコンポーネントの子孫セレクタには気をつけてください！** セレクタ `.a .b` を持つ CSS ルールの場合、`.a` にマッチする要素に再帰的な子コンポーネントが含まれている場合、その子コンポーネントのすべての `.b` はルールにマッチします。

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy