Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit a5f34dd

Browse filesBrowse files
yyx990803yyx990803
committed
Merge branch 'master' of github.com:vuejs/vue-loader
2 parents ba23b3d + 205294c commit a5f34dd
Copy full SHA for a5f34dd
Expand file treeCollapse file tree

28 files changed

+200
-136
lines changed

‎.github/ISSUE_TEMPLATE.md

Copy file name to clipboard
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<!--
2+
IMPORTANT: Please use the following link to create a new issue:
3+
4+
https://new-issue.vuejs.org/?repo=vuejs/vue-loader
5+
6+
If your issue was not created using the app above, it will be closed immediately.
7+
-->

‎docs/LANGS.md

Copy file name to clipboardExpand all lines: docs/LANGS.md
+1Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,4 @@
33
* [Русский](ru/)
44
* [Português](pt_BR/)
55
* [日本語](ja/)
6+
* [中文](zh-cn/)

‎docs/en/configurations/advanced.md

Copy file name to clipboardExpand all lines: docs/en/configurations/advanced.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Advanced Loader Configuration
22

3-
Sometimes the you may want to:
3+
Sometimes you may want to:
44

55
1. Apply a custom loader string to a language instead of letting `vue-loader` infer it;
66

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

Copy file name to clipboardExpand all lines: docs/en/features/scoped-css.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,13 @@ Into the following:
1818

1919
``` html
2020
<style>
21-
.example[_v-f3f3eg9] {
21+
.example[data-v-f3f3eg9] {
2222
color: red;
2323
}
2424
</style>
2525

2626
<template>
27-
<div class="example" _v-f3f3eg9>hi</div>
27+
<div class="example" data-v-f3f3eg9>hi</div>
2828
</template>
2929
```
3030

‎docs/en/workflow/production.md

Copy file name to clipboardExpand all lines: docs/en/workflow/production.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = {
2424
warnings: false
2525
}
2626
}),
27-
// optimize module ids by occurrence count
27+
// Webpack 1 only - optimize module ids by occurrence count
2828
new webpack.optimize.OccurrenceOrderPlugin()
2929
]
3030
}

‎docs/ja/README.md

Copy file name to clipboardExpand all lines: docs/ja/README.md
+10-11Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,12 @@
66

77
![screenshot](http://blog.evanyou.me/images/vue-component.png)
88

9-
`vue-loader` によって多くのクールな機能が提供されます：
9+
`vue-loader` によって多くのクールな機能が提供されます:
1010

11-
- デフォルトで ES2015 が有効；
12-
- `<style>` には SASS、 `<template>` には Jade など、Vue コンポーネントの各パーツに他の Webpack の loader が使用可能；
13-
カスタム loader チェーンを適用できる .vue ファイルのカスタムセクションを追加可能；
14-
- `<style>` と `<template>` で参照される静的なアセットをモジュールの依存として扱い、Webpack の loader で処理可能；
15-
- 各コンポーネントで scoped CSS をシミュレートすることが可能；
11+
- デフォルトで ES2015 が有効
12+
- `<style>` には SASS、 `<template>` には Jade など、Vue コンポーネントの各パーツに他の Webpack の loader が使用可能、カスタム loader チェーンを適用できる .vue ファイルのカスタムセクションを追加可能
13+
- `<style>` と `<template>` で参照される静的なアセットをモジュールの依存として扱い、Webpack の loader で処理可能
14+
- 各コンポーネントで scoped CSS をシミュレートすることが可能
1615
- 開発時のコンポーネントのホットリロードをサポート
1716

1817
つまり、Webpack と `vue-loader` の組み合わせは Vue.js アプリケーションを作成するための、現代的で柔軟かつとても強力なフロントエンドワークフローを実現することが可能になります。
@@ -29,10 +28,10 @@
2928

3029
しかし Webpack はそれ以上のことが出来ます。 "loader" を用いることで、最終的なバンドルしたファイルを出力する前に Webpack に様々な方法で全てのタイプのファイルを変換できるように設定することが出来ます。いくつかの例をあげると：
3130

32-
- ES2015、CoffeeScript、TypeScript のモジュールをプレーンな ES5 の CommonJS モジュールにトランスパイル；
33-
- オプションでコンパイルを行う前にソースコードを linter に通すことが可能；
34-
- Jade テンプレートをプレーンな HTML にトランスパイルし、JavaScript の文字列として展開；
35-
- SASS ファイルをプレーンな CSS にトランスパイルし、`<style>` タグとして挿入する JavaScript スニペットに変換；
36-
- HTML または CSS で参照されるイメージファイルを処理し、パスの設定に基づいた目的の場所に移動し、md5 ハッシュを使用して名前付け；
31+
- ES2015、CoffeeScript、TypeScript のモジュールをプレーンな ES5 の CommonJS モジュールにトランスパイル
32+
- オプションでコンパイルを行う前にソースコードを linter に通すことが可能
33+
- Jade テンプレートをプレーンな HTML にトランスパイルし、JavaScript の文字列として展開
34+
- SASS ファイルをプレーンな CSS にトランスパイルし、`<style>` タグとして挿入する JavaScript スニペットに変換
35+
- HTML または CSS で参照されるイメージファイルを処理し、パスの設定に基づいた目的の場所に移動し、md5 ハッシュを使用して名前付け
3736

3837
Webpack は非常に強力です。どのように動作するか理解すれば、フロントエンド開発のワークフローを劇的に向上させることが出来ます。欠点としては冗長で複雑な構成です。しかし、このガイドでは Vue.js と `vue-loader` での Webpack を使用する際に一般的な問題の解決策を見つけることができるはずです。

‎docs/ja/SUMMARY.md

Copy file name to clipboardExpand all lines: docs/ja/SUMMARY.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
- [カスタムブロック](configurations/custom-blocks.md)
1616
- ワークフロー
1717
- [プロダクションビルド](workflow/production.md)
18-
- [Linting](workflow/linting.md)
18+
- [リント](workflow/linting.md)
1919
- [テスト](workflow/testing.md)
2020
- [モックを使用したテスト](workflow/testing-with-mocks.md)
2121
- [オプションリファレンス](options.md)

‎docs/ja/configurations/advanced.md

Copy file name to clipboardExpand all lines: docs/ja/configurations/advanced.md
+6-6Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# 高度な loader の設定
22

3-
時折こうしたくなるかもしれません：
3+
時折こうしたくなるかもしれません:
44

5-
1. `vue-loader` が推測するのではなく、カスタム loader の文字列を言語に適用する。
6-
2. デフォルトの言語の組み込み loader の設定の上書き。
7-
3. 特定の言語ブロックをカスタム loader で前処理か後処理をする。
5+
1. `vue-loader` が推測するのではなく、カスタム loader の文字列を言語に適用する
6+
2. デフォルトの言語の組み込み loader の設定の上書き
7+
3. 特定の言語ブロックをカスタム loader で前処理か後処理をする
88

9-
そうするためには、`vue-loader` に `loaders` オプションを指定してください：
9+
そうするためには、`vue-loader` に `loaders` オプションを指定してください:
1010

11-
> メモ： `preLoaders` と `postLoaders` は 10.3.0 以上でのみサポートされます
11+
> メモ: `preLoaders` と `postLoaders` は 10.3.0 以上でのみサポートされます
1212
1313
### Webpack 2.x
1414

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

Copy file name to clipboardExpand all lines: docs/ja/configurations/asset-url.md
+2-3Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,14 @@
88
<img src="../image.png">
99
```
1010

11-
このようにコンパイルされます：
11+
このようにコンパイルされます:
1212

1313
``` js
1414
createElement('img', { attrs: { src: require('../image.png') }})
1515
```
1616
もちろん `.png` ファイルは JavaScript のファイルではありません。[file-loader](https://github.com/webpack/file-loader) または [url-loader](https://github.com/webpack/url-loader) を使用して Webpack を設定する必要があります。`vue-cli` でスキャフォールドされたプロジェクトでは同じような設定がなされています。
1717

18-
利点の全ては次の通りです：
18+
利点の全ては次の通りです:
1919

2020
1. `file-loader` はアセットファイルのコピー先や配置先を制定したり、バージョンハッシュを利用してキャッシングを改善する方法を指定する事が出来ます。さらに、これは、単に**あなたの `* .vue` ファイルの隣にイメージを置くことができ、配備するURLを心配するのではなくフォルダ構造に基づいて相対パスを使用する**ことを意味します。
21-
2221
2. `url-loader` は、指定されたしきい値よりも小さい場合、条件付きでファイルを base-64 データ URL としてインライン化することができます。これにより、単純なファイルに対する HTTP リクエストの量を減らすことができます。 ファイルがしきい値より大きい場合、自動的に `file-loader` にフォールバックします。

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

Copy file name to clipboardExpand all lines: docs/ja/configurations/custom-blocks.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
## 単一ドキュメントファイルの例
1010

11-
全ての `<docs>` カスタムブロックを一つのドキュメントファイルに展開する例を示します：
11+
全ての `<docs>` カスタムブロックを一つのドキュメントファイルに展開する例を示します:
1212

1313
#### component.vue
1414

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

Copy file name to clipboardExpand all lines: docs/ja/configurations/extract-css.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# CSS を単一のファイルに抽出する
22

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

55
### Webpack 2.x
66

‎docs/ja/configurations/pre-processors.md

Copy file name to clipboardExpand all lines: docs/ja/configurations/pre-processors.md
+4-4Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ Webpack において、全てのプリプロセッサは対応する loader を
44

55
### CSS
66

7-
例えば、SASS で `<style>` タグをコンパイルしましょう：
7+
例えば、SASS で `<style>` タグをコンパイルしましょう:
88

99
``` bash
1010
npm install sass-loader node-sass --save-dev
@@ -39,7 +39,7 @@ vue-loader を構成する方法の詳細については、[高度な loader の
3939

4040
### JavaScript
4141

42-
全てのVueコンポーネントのJavaScriptはデフォルトで `babel-loader` によって処理されます。しかしもちろんそれは変更することが可能です：
42+
全ての Vue コンポーネントの JavaScript はデフォルトで `babel-loader` によって処理されます。しかしもちろんそれは変更することが可能です:
4343

4444
``` bash
4545
npm install coffee-loader --save-dev
@@ -53,7 +53,7 @@ npm install coffee-loader --save-dev
5353

5454
### テンプレート
5555

56-
`pug-loader` のようなほとんどのWebpackテンプレート loader は、コンパイルされたHTML文字列の代わりにテンプレート関数を返すので、template の処理は少し異なります。`pug-loader` を使う代わりに、オリジナルの `pug` をインストールをするだけです：
56+
`pug-loader` のようなほとんどのWebpackテンプレート loader は、コンパイルされたHTML文字列の代わりにテンプレート関数を返すので、template の処理は少し異なります。`pug-loader` を使う代わりに、オリジナルの `pug` をインストールをするだけです:
5757

5858
``` bash
5959
npm install pug --save-dev
@@ -70,7 +70,7 @@ div
7070
7171
### インラインローダーリクエスト
7272

73-
`lang` 属性で [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) を使用することが可能です：
73+
`lang` 属性で [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) を使用することが可能です:
7474

7575
``` html
7676
<style lang="sass?outputStyle=expanded">

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

Copy file name to clipboardExpand all lines: docs/ja/features/css-modules.md
+7-7Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
### 使い方
88

9-
`module` 属性を `<style>` タグに追加します：
9+
`module` 属性を `<style>` タグに追加します:
1010

1111
``` html
1212
<style module>
@@ -29,7 +29,7 @@
2929
</template>
3030
```
3131

32-
これは算出プロパティなので、`:class` の オブジェクト/配列 構文でも動作します：
32+
これは算出プロパティなので、`:class` の オブジェクト / 配列構文でも動作します:
3333

3434
``` html
3535
<template>
@@ -44,7 +44,7 @@
4444
</template>
4545
```
4646

47-
そして JavaScript からもアクセス可能です：
47+
そして JavaScript からもアクセス可能です:
4848

4949
``` html
5050
<script>
@@ -60,9 +60,9 @@ export default {
6060

6161
[CSS Modules spec](https://github.com/css-modules/css-modules) を参照してください。モードの詳細については [global exceptions](https://github.com/css-modules/css-modules#exceptions) と [composition](https://github.com/css-modules/css-modules#composition)を参照してください。
6262

63-
### カスタム代入
63+
### カスタム注入名
6464

65-
単一の `*.vue` コンポーネントは複数の `<style>` タグを持つことが出来ます。注入されたスタイルが互いに上書きするのを避けるために、 `module`属性に値を与えることによって、注入された計算されたプロパティの名前をカスタマイズすることができます：
65+
単一の `*.vue` コンポーネントは複数の `<style>` タグを持つことが出来ます。注入されたスタイルが互いに上書きするのを避けるために、 `module`属性に値を与えることによって、注入された計算されたプロパティの名前をカスタマイズすることができます:
6666

6767
``` html
6868
<style module="a">
@@ -76,7 +76,7 @@ export default {
7676

7777
### `css-loader` クエリの設定
7878

79-
CSS モジュールは [css-loader](https://github.com/webpack/css-loader) によって処理されます。`<style module>` では `css-loader` に使われるデフォルトのクエリは次のようになります。
79+
CSS モジュールは [css-loader](https://github.com/webpack/css-loader) によって処理されます。`<style module>` では `css-loader` に使われるデフォルトのクエリは次のようになります:
8080

8181
``` js
8282
{
@@ -86,7 +86,7 @@ CSS モジュールは [css-loader](https://github.com/webpack/css-loader) に
8686
}
8787
```
8888

89-
vue-loader の `cssModules`オプションを使って` css-loader`に追加のクエリオプションを提供することができます：
89+
vue-loader の `cssModules`オプションを使って` css-loader`に追加のクエリオプションを提供することができます:
9090

9191
``` js
9292
// webpack 1

‎docs/ja/features/es2015.md

Copy file name to clipboardExpand all lines: docs/ja/features/es2015.md
+5-5Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
# ES2015
22

3-
同一プロジェクト内で `babel-loader` か `buble-loader` を検出したとき、全ての `*.vue` ファイルの `<script>` タグを処理するためにそれらを使用し Vue コンポーネント内で ES2015 を使用できるようにします。もしあなたがまだ新しい言語機能を手に入れていないのであれば、手に入れるべきです。いくつかのよい学習リソースはこちら：
3+
同一プロジェクト内で `babel-loader` か `buble-loader` を検出したとき、全ての `*.vue` ファイルの `<script>` タグを処理するためにそれらを使用し Vue コンポーネント内で ES2015 を使用できるようにします。もしあなたがまだ新しい言語機能を手に入れていないのであれば、学ぶべきです。いくつかのよい学習リソースはこちら:
44
- [Babel - Learn ES2015](https://babeljs.io/docs/learn-es2015/)
55
- [ES6 Features](https://github.com/lukehoban/es6features)
66
- [Exploring ES6 (book)](https://leanpub.com/exploring-es6)
77

8-
他の Vue コンポーネントを読み込む際の典型的なパターンはこちらです。
8+
他の Vue コンポーネントを読み込む際の典型的なパターンはこちらです:
99

1010
``` html
1111
<script>
@@ -21,11 +21,11 @@ export default {
2121
</script>
2222
```
2323

24-
ここでは ES2015 のオブジェクトリテラルを使用して子コンポーネントを定義しています。`{ ComponentA }` は `{ ComponentA: ComponentA }` の簡略形です。 Vue はオートでキーを `component-a` に変換し、インポートされたコンポーネントをテンプレート内で `<component-a>` として使用することが出来ます。
24+
ここでは ES2015 のオブジェクトリテラルを使用して子コンポーネントを定義しています。`{ ComponentA }` は `{ ComponentA: ComponentA }` の簡略形です。 Vue は自動でキーを `component-a` に変換し、インポートされたコンポーネントをテンプレート内で `<component-a>` として使用することが出来ます。
2525

2626
### テンプレート内のES2015
2727

28-
`*.vue` ファイル内の `<template>` は JavaScript の render 関数にコンパイルされ[Buble](https://buble.surge.sh/guide/) のカスタムビルドで処理され ES2015 の機能をサポートします。これにより [Object shorthand properties](https://buble.surge.sh/guide/#object-shorthand-methods-and-properties-transforms-concisemethodproperty-) と[算出プロパティ](https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-)などの機能が使用できるようになります。
28+
`*.vue` ファイル内の `<template>` は JavaScript の render 関数にコンパイルされ[Buble](https://buble.surge.sh/guide/) のカスタムビルドで処理され ES2015 の機能をサポートします。これにより [Object shorthand properties](https://buble.surge.sh/guide/#object-shorthand-methods-and-properties-transforms-concisemethodproperty-) と[算出プロパティ](https://buble.surge.sh/guide/#computed-properties-transforms-computedproperty-)などの機能が使用できるようになります:
2929

3030
``` html
3131
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
@@ -37,7 +37,7 @@ export default {
3737
<div :class="{ active, [`${prefix}-button`]: isButton }">
3838
```
3939

40-
**vue@^2.1.0 のみ利用可能:** `v-for` かスコープ付きスロットを使用することで、構造化されたパラメータを使用することが出来ます：
40+
**vue@^2.1.0 のみ利用可能:** `v-for` かスコープ付きスロットを使用することで、構造化されたパラメータを使用することが出来ます:
4141

4242
``` html
4343
<li v-for="{ id, text } in items">

‎docs/ja/features/postcss.md

Copy file name to clipboardExpand all lines: docs/ja/features/postcss.md
+5-6Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

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

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

99
- `postcss.config.js`
1010
- `.postcssrc`
@@ -16,7 +16,7 @@
1616

1717
あるいは、 `vue-loader` の `postcss` オプションを使用して `*.vue` ファイル用の postcss の設定を指定することが出来ます。
1818

19-
Webpack 1.x の例：
19+
Webpack 1.x の例:
2020

2121
``` js
2222
// webpack.config.js
@@ -52,11 +52,10 @@ module.exports = {
5252
}
5353
```
5454

55-
加えてpluginの配列を提供し、`postcss` オプションは以下も受け入れます：
55+
加えて plugin の配列を提供し、`postcss` オプションは以下も受け入れます
5656

57-
- プラグインの配列を返す関数；
58-
59-
- PostCSSプロセッサに渡すオプションを含むオブジェクト。これは、カスタム parser/stringifiers に依存するPostCSSプロジェクトを使用している場合に便利です。
57+
- プラグインの配列を返す関数
58+
- PostCSSプロセッサに渡すオプションを含むオブジェクト。これは、カスタム parser/stringifiers に依存するPostCSSプロジェクトを使用している場合に便利です:
6059

6160
``` js
6261
postcss: {

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

Copy file name to clipboardExpand all lines: docs/ja/features/scoped-css.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# スコープ付き CSS
22

3-
`scoped` 属性をもつ `<style>` タグを利用するとき、その CSS は現在のコンポーネントの要素にのみ適用されます。これは Shadow DOM のスタイルのカプセル化に似ています。いくつか注意点がありますが、polyfill は必要ありません。PostCSS を使用して以下を変換することによって実現しています。
3+
`scoped` 属性をもつ `<style>` タグを利用するとき、その CSS は現在のコンポーネントの要素にのみ適用されます。これは Shadow DOM のスタイルのカプセル化に似ています。いくつか注意点がありますが、polyfill は必要ありません。PostCSS を使用して以下を変換することによって実現しています:
44

55
``` html
66
<style scoped>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.